merge upstream/master
This commit is contained in:
jingsam
commit
f36b29707c
47 changed files with 1159 additions and 347 deletions
BIN
assets/iview.png
BIN
assets/iview.png
Binary file not shown.
|
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 160 KiB |
|
|
@ -1 +1 @@
|
|||
.ivu-article h1{font-size:28px}.ivu-article h2{font-size:22px}.ivu-article h3{font-size:18px}.ivu-article h4{font-size:14px}.ivu-article h5,.ivu-article h6{font-size:12px}.ivu-article blockquote{padding:5px 5px 3px 10px;line-height:1.5;border-left:4px solid #ddd;margin-bottom:20px;color:#666;font-size:14px}.ivu-article ul{padding-left:40px;list-style-type:disc}.ivu-article li{margin-bottom:5px}.ivu-article ol ul,.ivu-article ul ul{list-style-type:circle}.ivu-article p{margin:5px}
|
||||
.ivu-article h1{font-size:26px;font-weight:400}.ivu-article h2{font-size:20px;font-weight:400}.ivu-article h3{font-size:16px;font-weight:400}.ivu-article h4{font-size:14px;font-weight:400}.ivu-article h5,.ivu-article h6{font-size:12px;font-weight:400}.ivu-article blockquote{padding:5px 5px 3px 10px;line-height:1.5;border-left:4px solid #ddd;margin-bottom:20px;color:#666;font-size:14px}.ivu-article ul{padding-left:40px;list-style-type:disc}.ivu-article li{margin-bottom:5px;font-size:14px}.ivu-article ol ul,.ivu-article ul ul{list-style-type:circle}.ivu-article p{margin:5px;font-size:14px}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -47,6 +47,11 @@
|
|||
type: String
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
withDesc: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
baseClass () {
|
||||
return `${this.prefixCls}-notice`;
|
||||
|
|
@ -56,7 +61,8 @@
|
|||
this.baseClass,
|
||||
{
|
||||
[`${this.className}`]: !!this.className,
|
||||
[`${this.baseClass}-closable`]: this.closable
|
||||
[`${this.baseClass}-closable`]: this.closable,
|
||||
[`${this.baseClass}-with-desc`]: this.withDesc
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -85,6 +91,11 @@
|
|||
this.close();
|
||||
}, this.duration * 1000)
|
||||
}
|
||||
|
||||
// check if with desc in Notice component
|
||||
if (this.prefixCls === 'ivu-notice') {
|
||||
this.withDesc = this.$els.content.querySelectorAll(`.${this.prefixCls}-desc`)[0].innerHTML !== '';
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.clearCloseTimer();
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
v-model="checked"
|
||||
@change="change">
|
||||
</span>
|
||||
<slot><span>{{ value }}</span></slot>
|
||||
<slot v-if="showSlot"><span v-el:slot>{{ value }}</span></slot>
|
||||
</label>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -42,7 +42,8 @@
|
|||
return {
|
||||
model: [],
|
||||
selected: false,
|
||||
group: false
|
||||
group: false,
|
||||
showSlot: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -75,6 +76,9 @@
|
|||
ready () {
|
||||
if (!this.group) {
|
||||
this.updateModel();
|
||||
if (this.$els.slot && this.$els.slot.innerHTML === '') {
|
||||
this.showSlot = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -1,20 +1,44 @@
|
|||
<template>
|
||||
<input
|
||||
:class="classes"
|
||||
:type="type"
|
||||
:placeholder="placeholder"
|
||||
:name="name"
|
||||
v-model="value">
|
||||
<div :class="wrapClasses">
|
||||
<template v-if="type !== 'textarea'">
|
||||
<div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-el:prepend><slot name="prepend"></slot></div>
|
||||
<i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon']" v-if="icon" @click="handleIconClick"></i>
|
||||
<input
|
||||
type="text"
|
||||
:class="inputClasses"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:maxlength="maxlength"
|
||||
v-model="value"
|
||||
@keyup.enter="handleEnter">
|
||||
<div :class="[prefixCls + '-group-append']" v-if="append" v-el:append><slot name="append"></slot></div>
|
||||
</template>
|
||||
<textarea
|
||||
v-else
|
||||
v-el:textarea
|
||||
:class="textareaClasses"
|
||||
:style="textareaStyles"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:rows="rows"
|
||||
:maxlength="maxlength"
|
||||
v-model="value"
|
||||
@keyup.enter="handleEnter">
|
||||
</textarea>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { oneOf } from '../../utils/assist';
|
||||
import calcTextareaHeight from '../../utils/calcTextareaHeight';
|
||||
|
||||
const prefixCls = 'ivu-input';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
validator (value) {
|
||||
return oneOf(value, ['text', 'textarea']);
|
||||
},
|
||||
default: 'text'
|
||||
},
|
||||
value: {
|
||||
|
|
@ -22,28 +46,105 @@
|
|||
default: '',
|
||||
twoWay: true
|
||||
},
|
||||
placeholder: String,
|
||||
name: String,
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'large']);
|
||||
}
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
maxlength: {
|
||||
type: Number
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
icon: String,
|
||||
autosize: {
|
||||
type: [Boolean, Object],
|
||||
default: false
|
||||
},
|
||||
rows: {
|
||||
type: Number,
|
||||
default: 2
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
prefixCls: prefixCls,
|
||||
prepend: true,
|
||||
append: true,
|
||||
textareaStyles: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
wrapClasses () {
|
||||
return [
|
||||
`${prefixCls}-wrapper`,
|
||||
{
|
||||
[`${prefixCls}-type`]: this.type,
|
||||
[`${prefixCls}-group`]: this.prepend || this.append,
|
||||
[`${prefixCls}-group-${this.size}`]: (this.prepend || this.append) && !!this.size
|
||||
}
|
||||
]
|
||||
},
|
||||
inputClasses () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-${this.size}`]: !!this.size
|
||||
[`${prefixCls}-${this.size}`]: !!this.size,
|
||||
[`${prefixCls}-disabled`]: this.disabled
|
||||
}
|
||||
]
|
||||
},
|
||||
textareaClasses () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-disabled`]: this.disabled
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleEnter () {
|
||||
this.$emit('on-enter');
|
||||
},
|
||||
handleIconClick () {
|
||||
this.$emit('on-click');
|
||||
},
|
||||
resizeTextarea () {
|
||||
const autosize = this.autosize;
|
||||
if (!autosize || this.type !== 'textarea') {
|
||||
return false;
|
||||
}
|
||||
|
||||
const minRows = autosize.minRows;
|
||||
const maxRows = autosize.maxRows;
|
||||
|
||||
this.textareaStyles = calcTextareaHeight(this.$els.textarea, minRows, maxRows);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (val) {
|
||||
this.$nextTick(() => {
|
||||
this.resizeTextarea();
|
||||
});
|
||||
this.$emit('on-change', val);
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
if (this.type === 'text') {
|
||||
this.prepend = this.$els.prepend.innerHTML !== '';
|
||||
this.append = this.$els.append.innerHTML !== '';
|
||||
} else {
|
||||
this.prepend = false;
|
||||
this.append = false;
|
||||
}
|
||||
this.resizeTextarea();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
<Icon type="ios-close-empty"></Icon>
|
||||
</slot>
|
||||
</a>
|
||||
<div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><p>{{ title }}</p></slot></div>
|
||||
<div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
|
||||
<div :class="[prefixCls + '-body']"><slot></slot></div>
|
||||
<div :class="[prefixCls + '-footer']" v-if="!footerHide">
|
||||
<slot name="footer">
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
|
||||
let showHead = true;
|
||||
|
||||
if (this.$els.head.innerHTML == '<p></p>' && !this.title) {
|
||||
if (this.$els.head.innerHTML == `<div class="${prefixCls}-header-inner"></div>` && !this.title) {
|
||||
showHead = false;
|
||||
}
|
||||
|
||||
|
|
@ -199,6 +199,11 @@
|
|||
this.wrapShow = true;
|
||||
this.addScrollEffect();
|
||||
}
|
||||
},
|
||||
loading (val) {
|
||||
if (!val) {
|
||||
this.buttonLoading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,9 +42,11 @@ function notice (type, options) {
|
|||
|
||||
let content;
|
||||
|
||||
const with_desc = desc === '' ? '' : ` ${prefixCls}-with-desc`;
|
||||
|
||||
if (type == 'normal') {
|
||||
content = `
|
||||
<div class="${prefixCls}-custom-content">
|
||||
<div class="${prefixCls}-custom-content ${prefixCls}-with-normal${with_desc}">
|
||||
<div class="${prefixCls}-title">${title}</div>
|
||||
<div class="${prefixCls}-desc">${desc}</div>
|
||||
</div>
|
||||
|
|
@ -52,7 +54,7 @@ function notice (type, options) {
|
|||
} else {
|
||||
const iconType = iconTypes[type];
|
||||
content = `
|
||||
<div class="${prefixCls}-custom-content ${prefixCls}-with-icon">
|
||||
<div class="${prefixCls}-custom-content ${prefixCls}-with-icon ${prefixCls}-with-${type}${with_desc}">
|
||||
<span class="${prefixCls}-icon ${prefixCls}-icon-${type}">
|
||||
<i class="${iconPrefixCls} ${iconPrefixCls}-${iconType}"></i>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -26,9 +26,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-inner']" v-if="!confirm">
|
||||
<div :class="[prefixCls + '-title']" v-if="showTitle" v-el:title><slot name="title">{{ title }}</slot></div>
|
||||
<div :class="[prefixCls + '-title']" v-if="showTitle" v-el:title><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<div :class="[prefixCls + '-body-content']"><slot name="content">{{ content }}</slot></div>
|
||||
<div :class="[prefixCls + '-body-content']"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
},
|
||||
ready () {
|
||||
if (!this.confirm) {
|
||||
this.showTitle = this.$els.title.innerHTML != '';
|
||||
this.showTitle = this.$els.title.innerHTML != `<div class="${prefixCls}-title-inner"></div>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,7 @@
|
|||
:disabled="disabled"
|
||||
:checked="selected"
|
||||
@change="change">
|
||||
</span>
|
||||
<slot>{{ value }}</slot>
|
||||
</span><slot>{{ value }}</slot>
|
||||
</label>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,8 @@ const iview = {
|
|||
Modal,
|
||||
Notice,
|
||||
iOption: Option,
|
||||
OptionGroup: OptionGroup,
|
||||
OptionGroup,
|
||||
iOptionGroup: OptionGroup,
|
||||
Page,
|
||||
Panel: Collapse.Panel,
|
||||
Poptip,
|
||||
|
|
|
|||
|
|
@ -1,21 +1,27 @@
|
|||
.ivu-article {
|
||||
h1{
|
||||
font-size: 28px;
|
||||
font-size: 26px;
|
||||
font-weight: normal;
|
||||
}
|
||||
h2{
|
||||
font-size: 22px;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
h3{
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
h4{
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
h5{
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
h6{
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
blockquote{
|
||||
|
|
@ -33,6 +39,7 @@
|
|||
}
|
||||
li{
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
ul ul, ol ul{
|
||||
list-style-type: circle;
|
||||
|
|
@ -40,5 +47,6 @@
|
|||
|
||||
p{
|
||||
margin: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
body {
|
||||
font-family: @font-family;
|
||||
font-size: @font-size-base;
|
||||
font-size: @font-size-small;
|
||||
line-height: @line-height-base;
|
||||
color: @text-color;
|
||||
background-color: @body-background;
|
||||
|
|
@ -64,7 +64,7 @@ a {
|
|||
|
||||
&[disabled] {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
cursor: @cursor-disabled;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
padding: 8px 48px 8px 16px;
|
||||
border-radius: @border-radius-base;
|
||||
color: @text-color;
|
||||
font-size: 12px;
|
||||
font-size: @font-size-small;
|
||||
line-height: 16px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
|
|
@ -15,14 +15,14 @@
|
|||
}
|
||||
|
||||
&-icon {
|
||||
font-size: 14px;
|
||||
font-size: @font-size-base;
|
||||
top: 8px;
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&-desc {
|
||||
font-size: 12px;
|
||||
font-size: @font-size-small;
|
||||
color: @text-color;
|
||||
line-height: 21px;
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
&-extra {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 10px;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
&-body {
|
||||
|
|
|
|||
|
|
@ -23,4 +23,5 @@
|
|||
@import "select";
|
||||
@import "select-dropdown";
|
||||
@import "tooltip";
|
||||
@import "poptip";
|
||||
@import "poptip";
|
||||
@import "input";
|
||||
|
|
@ -13,8 +13,8 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
width: 80px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
height: @input-height-base;
|
||||
line-height: @input-height-base;
|
||||
vertical-align: middle;
|
||||
border: 1px solid @border-color-base;
|
||||
border-radius: @btn-border-radius;
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
&-handler {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
height: @input-height-base / 2;
|
||||
line-height: 0;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
|
@ -93,13 +93,13 @@
|
|||
|
||||
&-input-wrap {
|
||||
overflow: hidden;
|
||||
height: 28px;
|
||||
height: @input-height-base;
|
||||
}
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
height: @input-height-base;
|
||||
line-height: @input-height-base;
|
||||
padding: 0 7px;
|
||||
text-align: left;
|
||||
outline: 0;
|
||||
|
|
@ -117,15 +117,15 @@
|
|||
&-large {
|
||||
padding: 0;
|
||||
.@{input-number-prefix-cls}-input-wrap {
|
||||
height: 32px;
|
||||
height: @input-height-large;
|
||||
}
|
||||
.@{input-number-prefix-cls}-handler {
|
||||
height: 16px;
|
||||
height: @input-height-large / 2;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
height: @input-height-large;
|
||||
line-height: @input-height-large;
|
||||
}
|
||||
|
||||
.@{input-number-prefix-cls}-handler-up-inner {
|
||||
|
|
@ -139,15 +139,15 @@
|
|||
&-small {
|
||||
padding: 0;
|
||||
.@{input-number-prefix-cls}-input-wrap {
|
||||
height: 22px;
|
||||
height: @input-height-small;
|
||||
}
|
||||
.@{input-number-prefix-cls}-handler {
|
||||
height: 11px;
|
||||
height: @input-height-small / 2;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
height: @input-height-small;
|
||||
line-height: @input-height-small;
|
||||
margin-top: -1px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
|
|||
35
src/styles/components/input.less
Normal file
35
src/styles/components/input.less
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
@input-prefix-cls: ~"@{css-prefix}input";
|
||||
|
||||
.@{input-prefix-cls} {
|
||||
.input;
|
||||
&-wrapper{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
&-icon {
|
||||
width: 32px;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
color: @subsidiary-color;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
&:after{
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon + &{
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{input-prefix-cls}-group{
|
||||
.input-group(~"@{input-prefix-cls}");
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
@icon-prefix-cls: ~"@{css-prefix}icon";
|
||||
|
||||
.@{message-prefix-cls} {
|
||||
font-size: 12px;
|
||||
font-size: @font-size-small;
|
||||
position: fixed;
|
||||
z-index: @zindex-message;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
&-close {
|
||||
.content-close;
|
||||
.content-close(1px, 31px);
|
||||
}
|
||||
|
||||
&-body {
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
|
||||
&-footer {
|
||||
border-top: 1px solid @border-color-split;
|
||||
padding: 10px 18px 10px 10px;
|
||||
padding: 12px 18px 12px 10px;
|
||||
text-align: right;
|
||||
button + button {
|
||||
margin-left: 8px;
|
||||
|
|
|
|||
|
|
@ -6,26 +6,26 @@
|
|||
@notice-margin-bottom: 10px;
|
||||
|
||||
.@{notice-prefix-cls} {
|
||||
position: fixed;
|
||||
z-index: @zindex-notification;
|
||||
width: @notice-width;
|
||||
margin-right: 24px;
|
||||
position: fixed;
|
||||
z-index: @zindex-notification;
|
||||
|
||||
&-notice {
|
||||
padding: @notice-padding;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @shadow-base;
|
||||
border: 1px solid @border-color-base;
|
||||
background: #fff;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
margin-bottom: @notice-margin-bottom;
|
||||
padding: @notice-padding;
|
||||
border: 1px solid @border-color-split;
|
||||
border-radius: @border-radius-small;
|
||||
box-shadow: @shadow-base;
|
||||
background: #fff;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&-close {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 10px;
|
||||
top: 15px;
|
||||
color: #999;
|
||||
outline: none;
|
||||
|
||||
|
|
@ -33,35 +33,48 @@
|
|||
.close-base(-3px);
|
||||
}
|
||||
}
|
||||
|
||||
&-with-desc{
|
||||
.@{notice-prefix-cls}-notice-close{
|
||||
top: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: @font-size-base;
|
||||
color: @text-color;
|
||||
margin-bottom: 4px;
|
||||
color: @title-color;
|
||||
padding-right: 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&-with-desc &-title{
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
&-with-desc&-with-icon &-title{
|
||||
margin-left: 51px;
|
||||
}
|
||||
|
||||
&-desc {
|
||||
font-size: 12px;
|
||||
color: @legend-color;
|
||||
text-align: justify;
|
||||
line-height: 1.5;
|
||||
}
|
||||
&-with-desc&-with-icon &-desc{
|
||||
margin-left: 51px;
|
||||
}
|
||||
|
||||
&-with-icon &-title{
|
||||
margin-left: 51px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&-with-icon &-desc {
|
||||
margin-left: 51px;
|
||||
margin-left: 26px;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
left: 21px;
|
||||
top: 50%;
|
||||
margin-top: -21px;
|
||||
font-size: 28px;
|
||||
left: 20px;
|
||||
margin-top: -1px;
|
||||
font-size: 16px;
|
||||
|
||||
&-success {
|
||||
color: @success-color;
|
||||
|
|
@ -76,4 +89,44 @@
|
|||
color: @error-color;
|
||||
}
|
||||
}
|
||||
&-with-desc &-icon{
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
&-custom-content{
|
||||
&:after{
|
||||
content: "";
|
||||
display: block;
|
||||
width: 4px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
&-with-normal{
|
||||
&:after{
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
&-with-info{
|
||||
&:after{
|
||||
background: @primary-color;
|
||||
}
|
||||
}
|
||||
&-with-success{
|
||||
&:after{
|
||||
background: @success-color;
|
||||
}
|
||||
}
|
||||
&-with-warning{
|
||||
&:after{
|
||||
background: @warning-color;
|
||||
}
|
||||
}
|
||||
&-with-error{
|
||||
&:after{
|
||||
background: @error-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,9 +12,9 @@
|
|||
|
||||
&-item {
|
||||
float: left;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
min-width: @btn-circle-size;
|
||||
height: @btn-circle-size;
|
||||
line-height: @btn-circle-size - 2px;
|
||||
margin-right: 4px;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
&:after {
|
||||
content: "•••";
|
||||
display: block;
|
||||
letter-spacing: 2px;
|
||||
letter-spacing: 1px;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -85,36 +85,45 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-prev,
|
||||
&-item-jump-prev,
|
||||
&-item-jump-next {
|
||||
&-prev{
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&-item-jump-prev,
|
||||
&-item-jump-next{
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
&-next{
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&-prev,
|
||||
&-next,
|
||||
&-item-jump-prev,
|
||||
&-item-jump-next {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
min-width: @btn-circle-size;
|
||||
height: @btn-circle-size;
|
||||
line-height: @btn-circle-size - 2px;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
font-family: Arial;
|
||||
border: 1px solid @border-color-base;
|
||||
border-radius: @btn-border-radius;
|
||||
.transition(all @transition-time @ease-in-out);
|
||||
}
|
||||
|
||||
&-prev,
|
||||
&-next {
|
||||
border: 1px solid @border-color-base;
|
||||
background-color: #fff;
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -150,8 +159,8 @@
|
|||
|
||||
&-elevator {
|
||||
float: left;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
height: @btn-circle-size;
|
||||
line-height: @btn-circle-size;
|
||||
|
||||
input {
|
||||
.input;
|
||||
|
|
@ -164,8 +173,8 @@
|
|||
|
||||
&-total {
|
||||
float: left;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
height: @btn-circle-size;
|
||||
line-height: @btn-circle-size;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -199,51 +208,57 @@
|
|||
border-color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
span{
|
||||
padding: 0 8px 0 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{page-prefix-cls} {
|
||||
&.mini &-total {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
height: @btn-circle-size-small;
|
||||
line-height: @btn-circle-size-small;
|
||||
}
|
||||
|
||||
&.mini &-item {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
min-width: @btn-circle-size-small;
|
||||
height: @btn-circle-size-small;
|
||||
line-height: @btn-circle-size-small;
|
||||
border-radius: @btn-border-radius-small;
|
||||
}
|
||||
|
||||
&.mini &-prev,
|
||||
&.mini &-next {
|
||||
margin: 0;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
min-width: @btn-circle-size-small;
|
||||
height: @btn-circle-size-small;
|
||||
line-height: @btn-circle-size-small;
|
||||
border: 0;
|
||||
|
||||
a {
|
||||
i:after {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
height: @btn-circle-size-small;
|
||||
line-height: @btn-circle-size-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.mini &-item-jump-prev,
|
||||
&.mini &-item-jump-next {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
height: @btn-circle-size-small;
|
||||
line-height: @btn-circle-size-small;
|
||||
border: none;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.mini &-options {
|
||||
margin-left: 8px;
|
||||
&-elevator {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
height: @btn-circle-size-small;
|
||||
line-height: @btn-circle-size-small;
|
||||
|
||||
input {
|
||||
.input-small;
|
||||
|
|
|
|||
|
|
@ -17,11 +17,24 @@
|
|||
|
||||
&-title {
|
||||
margin: 0;
|
||||
padding: 0 16px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
color: #666;
|
||||
padding: 8px 16px;
|
||||
position: relative;
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
display: block;
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
bottom: 0;
|
||||
background-color: @border-color-split;
|
||||
}
|
||||
|
||||
&-inner{
|
||||
color: @title-color;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
&-body{
|
||||
|
|
@ -29,6 +42,10 @@
|
|||
|
||||
&-content{
|
||||
overflow: auto;
|
||||
|
||||
&-inner{
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -36,7 +53,7 @@
|
|||
width: 100%;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid @border-color-split;
|
||||
//border: 1px solid @border-color-split;
|
||||
border-radius: @border-radius-small;
|
||||
box-shadow: @shadow-base;
|
||||
white-space: nowrap;
|
||||
|
|
@ -108,8 +125,9 @@
|
|||
&-confirm &-body{
|
||||
padding: 16px 16px 8px;
|
||||
.ivu-icon{
|
||||
font-size: 16px;
|
||||
color: @warning-color;
|
||||
line-height: 17px;
|
||||
line-height: 18px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
.@{progress-prefix-cls} {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-size: @font-size-small;
|
||||
position: relative;
|
||||
|
||||
&-outer {
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
|
||||
.@{radio-group-prefix-cls} {
|
||||
display: inline-block;
|
||||
font-size: @font-size-base;
|
||||
font-size: @font-size-small;
|
||||
}
|
||||
|
||||
// 普通状态
|
||||
.@{radio-prefix-cls}-wrapper {
|
||||
font-size: @font-size-base;
|
||||
font-size: @font-size-small;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -19,9 +19,10 @@
|
|||
}
|
||||
|
||||
.@{radio-prefix-cls} {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
|
|
@ -124,19 +125,24 @@ span.@{radio-prefix-cls} + * {
|
|||
font-size: 0;
|
||||
-webkit-text-size-adjust:none;
|
||||
|
||||
.@{radio-prefix-cls}{
|
||||
width: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.@{radio-prefix-cls}-wrapper {
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
height: 28px;
|
||||
line-height: 26px;
|
||||
color: @btn-default-color;
|
||||
display: inline-block;
|
||||
height: @btn-circle-size;
|
||||
line-height: @btn-circle-size - 2px;
|
||||
margin: 0;
|
||||
padding: 0 16px;
|
||||
font-size: @font-size-small;
|
||||
color: @btn-default-color;
|
||||
.transition(all @transition-time ease-in-out);
|
||||
cursor: pointer;
|
||||
border: 1px solid @border-color-base;
|
||||
border-left: 0;
|
||||
background: #fff;
|
||||
padding: 0 16px;
|
||||
|
||||
> span {
|
||||
margin-left: 0;
|
||||
|
|
@ -232,15 +238,16 @@ span.@{radio-prefix-cls} + * {
|
|||
}
|
||||
|
||||
.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-large .@{radio-prefix-cls}-wrapper{
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
height: @btn-circle-size-large;
|
||||
line-height: @btn-circle-size-large - 2px;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-small .@{radio-prefix-cls}-wrapper{
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
height: @btn-circle-size-small;
|
||||
line-height: @btn-circle-size-small - 2px;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
font-size: @font-size-small;
|
||||
&:first-child {
|
||||
border-radius: @btn-border-radius-small 0 0 @btn-border-radius-small;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,12 +5,13 @@
|
|||
max-height: 200px;
|
||||
overflow: auto;
|
||||
margin: 5px 0;
|
||||
padding: 7px 0;
|
||||
padding: 5px 0;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid @border-color-base;
|
||||
border: 1px solid @border-color-split;
|
||||
border-radius: @btn-border-radius;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.2);
|
||||
//box-shadow: 0 1px 3px rgba(0,0,0,.2);
|
||||
box-shadow: @shadow-base;
|
||||
position: absolute;
|
||||
z-index: @zindex-select;
|
||||
}
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
}
|
||||
|
||||
&-single &-selection{
|
||||
height: 28px;
|
||||
height: @input-height-base;
|
||||
position: relative;
|
||||
|
||||
.@{select-prefix-cls}-placeholder{
|
||||
|
|
@ -89,8 +89,9 @@
|
|||
|
||||
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
|
||||
display: block;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
height: @input-height-base - 2px;
|
||||
line-height: @input-height-base - 2px;
|
||||
font-size: @font-size-small;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -100,32 +101,33 @@
|
|||
}
|
||||
|
||||
&-large&-single &-selection{
|
||||
height: 32px;
|
||||
height: @input-height-large;
|
||||
|
||||
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
height: @input-height-large - 2px;
|
||||
line-height: @input-height-large - 2px;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
&-small&-single &-selection{
|
||||
height: 22px;
|
||||
height: @input-height-small;
|
||||
border-radius: @btn-border-radius-small;
|
||||
|
||||
.@{select-prefix-cls}-placeholder, .@{select-prefix-cls}-selected-value{
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
height: @input-height-small - 2px;
|
||||
line-height: @input-height-small - 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&-multiple &-selection{
|
||||
padding: 0 24px 0 2px;
|
||||
min-height: 28px;
|
||||
padding: 0 24px 0 4px;
|
||||
min-height: @input-height-base;
|
||||
|
||||
.@{select-prefix-cls}-placeholder{
|
||||
display: block;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
height: @input-height-base - 2px;
|
||||
line-height: @input-height-base - 2px;
|
||||
color: @input-placeholder-color;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -141,7 +143,7 @@
|
|||
height: @input-height-base;
|
||||
line-height: @input-height-base;
|
||||
padding: 0 24px 0 8px;
|
||||
font-size: @font-size-base;
|
||||
font-size: @font-size-small;
|
||||
outline: none;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -157,6 +159,7 @@
|
|||
}
|
||||
|
||||
&-large &-input{
|
||||
font-size: @font-size-base;
|
||||
height: @input-height-large;
|
||||
}
|
||||
|
||||
|
|
@ -165,8 +168,8 @@
|
|||
}
|
||||
|
||||
&-multiple &-input{
|
||||
height: 25px;
|
||||
line-height: 28px;
|
||||
height: @input-height-base - 3px;
|
||||
line-height: @input-height-base;
|
||||
padding: 0 0 0 6px;
|
||||
}
|
||||
|
||||
|
|
@ -174,13 +177,18 @@
|
|||
text-align: center;
|
||||
color: @btn-disable-color;
|
||||
}
|
||||
|
||||
&-multiple .@{css-prefix}tag{
|
||||
margin: 3px 4px 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-item-prefix-cls} {
|
||||
margin: 0;
|
||||
padding: 7px 15px;
|
||||
padding: 7px 16px 8px;
|
||||
clear: both;
|
||||
color: @text-color;
|
||||
font-size: @font-size-small;
|
||||
//border-radius: @btn-border-radius-small;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
|
@ -244,7 +252,7 @@
|
|||
padding: 0;
|
||||
|
||||
&-title {
|
||||
padding-left: 10px;
|
||||
padding-left: 8px;
|
||||
font-size: 12px;
|
||||
color: @legend-color;
|
||||
height: 30px;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
&-inner {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-size: @font-size-small;
|
||||
position: absolute;
|
||||
left: 25px;
|
||||
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
line-height: 1;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
font-size: 14px;
|
||||
font-size: @font-size-base;
|
||||
position: absolute;
|
||||
left: -14px;
|
||||
.transform(translateY(-50%));
|
||||
|
|
@ -63,9 +63,9 @@
|
|||
|
||||
&-content {
|
||||
padding: 1px 1px 10px 24px;
|
||||
font-size: @font-size-base;
|
||||
font-size: @font-size-small;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
|
|
|||
|
|
@ -19,14 +19,14 @@
|
|||
&-inner{
|
||||
max-width: @tooltip-max-width;
|
||||
min-height: 34px;
|
||||
padding: 8px 10px;
|
||||
padding: 8px 12px;
|
||||
color: @tooltip-color;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @border-radius-small;
|
||||
box-shadow: @shadow-base;
|
||||
white-space:nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-arrow{
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
width: 5px;
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
width: 5px;
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
|
|
@ -136,7 +136,7 @@
|
|||
|
||||
.@{checkbox-prefix-cls}-wrapper {
|
||||
cursor: pointer;
|
||||
font-size: @font-size-base;
|
||||
font-size: @font-size-small;
|
||||
display: inline-block;
|
||||
& + & {
|
||||
margin-left: 8px;
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
|
||||
.@{checkbox-prefix-cls}-wrapper + span,
|
||||
.@{checkbox-prefix-cls} + span {
|
||||
margin-left: 4px;
|
||||
//margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.close-base(@top: 0) {
|
||||
font-size: 22px;
|
||||
.close-base(@top: 0, @icon-font-size: 22px) {
|
||||
font-size: @icon-font-size;
|
||||
color: @legend-color;
|
||||
transition: color @transition-time ease;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -2,15 +2,18 @@
|
|||
|
||||
.content-header() {
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
padding: 10px 16px;
|
||||
padding: 14px 16px;
|
||||
line-height: 1;
|
||||
|
||||
p {
|
||||
p,
|
||||
&-inner
|
||||
{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
font-size: @font-size-base;
|
||||
color: @title-color;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -18,8 +21,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.content-close(@top: 0) {
|
||||
font-size: 12px;
|
||||
.content-close(@top: 0, @icon-font-size: 22px) {
|
||||
font-size: @font-size-small;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 8px;
|
||||
|
|
@ -27,6 +30,6 @@
|
|||
cursor: pointer;
|
||||
|
||||
.@{icon-prefix-cls}-ios-close-empty {
|
||||
.close-base(@top);
|
||||
.close-base(@top, @icon-font-size);
|
||||
}
|
||||
}
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
}
|
||||
|
||||
.input-large() {
|
||||
font-size: @font-size-base;
|
||||
padding: @input-padding-vertical-large @input-padding-horizontal;
|
||||
height: @input-height-large;
|
||||
}
|
||||
|
|
@ -35,7 +36,7 @@
|
|||
height: @input-height-base;
|
||||
line-height: @line-height-base;
|
||||
padding: @input-padding-vertical-base @input-padding-horizontal;
|
||||
font-size: @font-size-base;
|
||||
font-size: @font-size-small;
|
||||
border: 1px solid @input-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
color: @input-color;
|
||||
|
|
@ -64,6 +65,7 @@
|
|||
max-width: 100%;
|
||||
height: auto;
|
||||
vertical-align: bottom;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
// Size
|
||||
|
|
@ -74,4 +76,141 @@
|
|||
&-small {
|
||||
.input-small();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group(@inputClass) {
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
position: relative;
|
||||
font-size: @font-size-small;
|
||||
|
||||
&-large{
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
// Undo padding and float of grid classes
|
||||
&[class*="col-"] {
|
||||
float: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
> [class*="col-"] {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
&-prepend,
|
||||
&-append,
|
||||
> .@{inputClass} {
|
||||
display: table-cell;
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-prepend .@{css-prefix}btn,
|
||||
&-append .@{css-prefix}btn
|
||||
{
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal);
|
||||
}
|
||||
|
||||
&-prepend,
|
||||
&-append
|
||||
{
|
||||
width: 1px; // To make addon/wrap as small as possible
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.@{inputClass} {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&-prepend,
|
||||
&-append
|
||||
{
|
||||
padding: @input-padding-vertical-base @input-padding-horizontal;
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: @input-color;
|
||||
text-align: center;
|
||||
background-color: #eee;
|
||||
border: 1px solid @input-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
// Reset Select's style in addon
|
||||
.@{css-prefix}select {
|
||||
margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal); // lesshint spaceAroundOperator: false
|
||||
|
||||
&-selection {
|
||||
background-color: inherit;
|
||||
margin: -1px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
&-visible .@{css-prefix}select-selection{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reset rounded corners
|
||||
> span > .@{inputClass}:first-child,
|
||||
> .@{inputClass}:first-child,
|
||||
&-prepend
|
||||
{
|
||||
border-bottom-right-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
|
||||
// Reset Select's style in addon
|
||||
.@{css-prefix}-select .@{css-prefix}-select-selection {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-prepend {
|
||||
border-right: 0;
|
||||
}
|
||||
&-append {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
> .@{inputClass}:last-child,
|
||||
&-append
|
||||
{
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
|
||||
// Reset Select's style in addon
|
||||
.@{css-prefix}-select .@{css-prefix}-select-selection {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Sizing options
|
||||
&-large .@{inputClass},
|
||||
&-large > &-prepend,
|
||||
&-large > &-append
|
||||
{
|
||||
.input-large();
|
||||
}
|
||||
|
||||
&-small .@{inputClass},
|
||||
&-small > &-prepend,
|
||||
&-small > &-append
|
||||
{
|
||||
.input-small();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
@link-active-color : shade(@link-color, 5%);
|
||||
@selected-color : fade(@primary-color, 90%);
|
||||
@tooltip-color : #fff;
|
||||
@subsidiary-color : #9ea7b4;
|
||||
|
||||
// Base
|
||||
@body-background : #fff;
|
||||
|
|
@ -34,10 +35,10 @@
|
|||
// Background color
|
||||
@background-color-base : #f7f7f7; // base
|
||||
@background-color-select-hover: @input-disabled-bg;
|
||||
@tooltip-bg : #373737;
|
||||
@tooltip-bg : rgba(70, 76, 91, .9);
|
||||
|
||||
// Shadow
|
||||
@shadow-color : rgba(100, 100, 100, .2);
|
||||
@shadow-color : rgba(0, 0, 0, .2);
|
||||
@shadow-base : @shadow-down;
|
||||
@shadow-card : 0 1px 1px 0 rgba(0,0,0,.1);
|
||||
@shadow-up : 0 -1px 6px @shadow-color;
|
||||
|
|
@ -47,7 +48,7 @@
|
|||
|
||||
// Button
|
||||
@btn-font-weight : normal;
|
||||
@btn-padding-base : 4px 15px;
|
||||
@btn-padding-base : 6px 15px;
|
||||
@btn-padding-large : 6px 15px 7px 15px;
|
||||
@btn-padding-small : 2px 7px;
|
||||
@btn-font-size : 12px;
|
||||
|
|
@ -71,7 +72,7 @@
|
|||
@btn-ghost-bg : transparent;
|
||||
@btn-ghost-border : @border-color-base;
|
||||
|
||||
@btn-circle-size : 28px;
|
||||
@btn-circle-size : 32px;
|
||||
@btn-circle-size-large : 36px;
|
||||
@btn-circle-size-small : 24px;
|
||||
|
||||
|
|
@ -83,9 +84,9 @@
|
|||
@legend-color : #999;
|
||||
|
||||
// Input
|
||||
@input-height-base : 28px;
|
||||
@input-height-large : 32px;
|
||||
@input-height-small : 22px;
|
||||
@input-height-base : 32px;
|
||||
@input-height-large : 36px;
|
||||
@input-height-small : 24px;
|
||||
|
||||
@input-padding-horizontal : 7px;
|
||||
@input-padding-vertical-base : 4px;
|
||||
|
|
|
|||
108
src/utils/calcTextareaHeight.js
Normal file
108
src/utils/calcTextareaHeight.js
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
// Thanks to
|
||||
// https://github.com/andreypopp/react-textarea-autosize/
|
||||
// https://github.com/ElemeFE/element/blob/master/packages/input/src/calcTextareaHeight.js
|
||||
|
||||
let hiddenTextarea;
|
||||
|
||||
const HIDDEN_STYLE = `
|
||||
height:0 !important;
|
||||
min-height:0 !important;
|
||||
max-height:none !important;
|
||||
visibility:hidden !important;
|
||||
overflow:hidden !important;
|
||||
position:absolute !important;
|
||||
z-index:-1000 !important;
|
||||
top:0 !important;
|
||||
right:0 !important
|
||||
`;
|
||||
|
||||
const CONTEXT_STYLE = [
|
||||
'letter-spacing',
|
||||
'line-height',
|
||||
'padding-top',
|
||||
'padding-bottom',
|
||||
'font-family',
|
||||
'font-weight',
|
||||
'font-size',
|
||||
'text-rendering',
|
||||
'text-transform',
|
||||
'width',
|
||||
'text-indent',
|
||||
'padding-left',
|
||||
'padding-right',
|
||||
'border-width',
|
||||
'box-sizing'
|
||||
];
|
||||
|
||||
function calculateNodeStyling(node) {
|
||||
const style = window.getComputedStyle(node);
|
||||
|
||||
const boxSizing = style.getPropertyValue('box-sizing');
|
||||
|
||||
const paddingSize = (
|
||||
parseFloat(style.getPropertyValue('padding-bottom')) +
|
||||
parseFloat(style.getPropertyValue('padding-top'))
|
||||
);
|
||||
|
||||
const borderSize = (
|
||||
parseFloat(style.getPropertyValue('border-bottom-width')) +
|
||||
parseFloat(style.getPropertyValue('border-top-width'))
|
||||
);
|
||||
|
||||
const contextStyle = CONTEXT_STYLE
|
||||
.map(name => `${name}:${style.getPropertyValue(name)}`)
|
||||
.join(';');
|
||||
|
||||
return {contextStyle, paddingSize, borderSize, boxSizing};
|
||||
}
|
||||
|
||||
export default function calcTextareaHeight(targetNode, minRows = null, maxRows = null) {
|
||||
if (!hiddenTextarea) {
|
||||
hiddenTextarea = document.createElement('textarea');
|
||||
document.body.appendChild(hiddenTextarea);
|
||||
}
|
||||
|
||||
let {
|
||||
paddingSize,
|
||||
borderSize,
|
||||
boxSizing,
|
||||
contextStyle
|
||||
} = calculateNodeStyling(targetNode);
|
||||
|
||||
hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
|
||||
hiddenTextarea.value = targetNode.value || targetNode.placeholder || '';
|
||||
|
||||
let height = hiddenTextarea.scrollHeight;
|
||||
let minHeight = -Infinity;
|
||||
let maxHeight = Infinity;
|
||||
|
||||
if (boxSizing === 'border-box') {
|
||||
height = height + borderSize;
|
||||
} else if (boxSizing === 'content-box') {
|
||||
height = height - paddingSize;
|
||||
}
|
||||
|
||||
hiddenTextarea.value = '';
|
||||
let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
|
||||
|
||||
if (minRows !== null) {
|
||||
minHeight = singleRowHeight * minRows;
|
||||
if (boxSizing === 'border-box') {
|
||||
minHeight = minHeight + paddingSize + borderSize;
|
||||
}
|
||||
height = Math.max(minHeight, height);
|
||||
}
|
||||
if (maxRows !== null) {
|
||||
maxHeight = singleRowHeight * maxRows;
|
||||
if (boxSizing === 'border-box') {
|
||||
maxHeight = maxHeight + paddingSize + borderSize;
|
||||
}
|
||||
height = Math.min(maxHeight, height);
|
||||
}
|
||||
|
||||
return {
|
||||
height: `${height}px`,
|
||||
minHeight: `${minHeight}px`,
|
||||
maxHeight: `${maxHeight}px`
|
||||
};
|
||||
};
|
||||
|
|
@ -31,6 +31,7 @@ li + li {
|
|||
<li><a v-link="'/more'">More</a></li>
|
||||
<li><a v-link="'/page'">Page</a></li>
|
||||
<li><a v-link="'/poptip'">Poptip</a></li>
|
||||
<li><a v-link="'/tooltip'">Tooltip</a></li>
|
||||
<li><a v-link="'/radio'">Radio</a></li>
|
||||
<li><a v-link="'/select'">Select</a></li>
|
||||
<li><a v-link="'/slider'">Slider</a></li>
|
||||
|
|
@ -38,6 +39,7 @@ li + li {
|
|||
<li><a v-link="'/switch'">Switch</a></li>
|
||||
<li><a v-link="'/alert'">Alert</a></li>
|
||||
<li><a v-link="'/tag'">Tag</a></li>
|
||||
<li><a v-link="'/input'">Input</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
|
|
|
|||
10
test/main.js
10
test/main.js
|
|
@ -80,6 +80,16 @@ router.map({
|
|||
component: function (resolve) {
|
||||
require(['./routers/tag.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/input': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/input.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/tooltip': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/tooltip.vue'], resolve);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
121
test/routers/input.vue
Normal file
121
test/routers/input.vue
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" @on-click="iconclick" size="large" placeholder="请输入"></i-input>
|
||||
<i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" placeholder="请输入"></i-input>
|
||||
<i-input icon="ios-clock-outline" style="width:200px;" :value.sync="v" @on-enter="enter" size="small" placeholder="请输入"></i-input>
|
||||
<br>
|
||||
<br>
|
||||
<i-input style="width:200px;" :value.sync="v" @on-enter="enter" size="large" placeholder="请输入"></i-input>
|
||||
<i-input style="width:200px;" :value.sync="v" @on-enter="enter" placeholder="请输入"></i-input>
|
||||
<i-input style="width:200px;" :value.sync="v" @on-enter="enter" @on-change="change" size="small" placeholder="请输入"></i-input>
|
||||
{{ v }}
|
||||
<br>
|
||||
<br>
|
||||
<i-input placeholder="this is something" style="width:200px;" :value.sync="t" type="textarea" :autosize="autosize"></i-input>
|
||||
{{ t }}
|
||||
<br>
|
||||
<br>
|
||||
<div style="width: 400px">
|
||||
<i-input :value.sync="v">
|
||||
<span slot="prepend">http://</span>
|
||||
<span slot="append">
|
||||
<i-button icon="ios-search"></i-button>
|
||||
</span>
|
||||
</i-input>
|
||||
<br>
|
||||
<i-input :value.sync="v">
|
||||
<span slot="prepend">http://</span>
|
||||
<span slot="append"><Icon type="ios-search"></Icon></span>
|
||||
</i-input>
|
||||
<br>
|
||||
<i-input :value.sync="v" size="small">
|
||||
<span slot="prepend">http://</span>
|
||||
<span slot="append"><Icon type="ios-search"></Icon></span>
|
||||
</i-input>
|
||||
|
||||
<br>
|
||||
<i-input :value.sync="v" size="large">
|
||||
<i-select :model.sync="select1" slot="prepend" style="width: 80px">
|
||||
<i-option value="http">http://</i-option>
|
||||
<i-option value="https">https://</i-option>
|
||||
</i-select>
|
||||
<i-select :model.sync="select2" slot="append" style="width: 70px">
|
||||
<i-option value="com">.com</i-option>
|
||||
<i-option value="cn">.cn</i-option>
|
||||
<i-option value="net">.net</i-option>
|
||||
<i-option value="io">.io</i-option>
|
||||
</i-select>
|
||||
</i-input>
|
||||
<br>
|
||||
<i-input :value.sync="v">
|
||||
<i-select :model.sync="select1" slot="prepend" style="width: 80px">
|
||||
<i-option value="http">http://</i-option>
|
||||
<i-option value="https">https://</i-option>
|
||||
</i-select>
|
||||
<i-select :model.sync="select2" slot="append" style="width: 70px">
|
||||
<i-option value="com">.com</i-option>
|
||||
<i-option value="cn">.cn</i-option>
|
||||
<i-option value="net">.net</i-option>
|
||||
<i-option value="io">.io</i-option>
|
||||
</i-select>
|
||||
</i-input>
|
||||
<br>
|
||||
<i-input :value.sync="v" size="small">
|
||||
<i-select :model.sync="select1" slot="prepend" style="width: 80px">
|
||||
<i-option value="http">http://</i-option>
|
||||
<i-option value="https">https://</i-option>
|
||||
</i-select>
|
||||
<i-select :model.sync="select2" slot="append" style="width: 70px">
|
||||
<i-option value="com">.com</i-option>
|
||||
<i-option value="cn">.cn</i-option>
|
||||
<i-option value="net">.net</i-option>
|
||||
<i-option value="io">.io</i-option>
|
||||
</i-select>
|
||||
</i-input>
|
||||
<Input-number :value="2" size="small"></Input-number>
|
||||
<Input-number :value="2"></Input-number>
|
||||
<Input-number :value="2" size="large"></Input-number>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { iInput, Icon, iButton, iSelect, iOption, InputNumber } from 'iview';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
iInput,
|
||||
Icon,
|
||||
iButton,
|
||||
iSelect,
|
||||
iOption,
|
||||
InputNumber
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
v: 'hello',
|
||||
t: '',
|
||||
autosize: {
|
||||
minRows: 2,
|
||||
maxRows: 5
|
||||
},
|
||||
select1: 'http',
|
||||
select2: 'com'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
enter () {
|
||||
console.log(123)
|
||||
},
|
||||
iconclick () {
|
||||
console.log('iconclicked')
|
||||
},
|
||||
change (val) {
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,65 +1,117 @@
|
|||
<template>
|
||||
<i-button @click="info">info</i-button>
|
||||
<i-button @click="success">success</i-button>
|
||||
<i-button @click="error">error</i-button>
|
||||
<i-button @click="warning">warning</i-button>
|
||||
<i-button @click="loading">手动消失</i-button>
|
||||
<i-button @click="destroy">destroy</i-button>
|
||||
<Alert closable>消息提示文案</Alert>
|
||||
<Alert type="success" show-icon closable>
|
||||
成功提示文案
|
||||
<span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
|
||||
</Alert>
|
||||
<Card :bordered="false">
|
||||
<p slot="title">无边框标题</p>
|
||||
<p>无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充。</p>
|
||||
</Card>
|
||||
<i-button @click="mInfo">m信息</i-button>
|
||||
<i-button @click="open">打开</i-button>
|
||||
<i-button @click="info2">消息2</i-button>
|
||||
<i-button @click="info">消息</i-button>
|
||||
<i-button @click="success">成功</i-button>
|
||||
<i-button @click="warning">警告</i-button>
|
||||
<i-button @click="error">错误</i-button>
|
||||
<i-button @click="modal1 = true"></i-button>
|
||||
<Modal
|
||||
:visible.sync="modal1"
|
||||
title="普通的Modal对话框标题">
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
</Modal>
|
||||
</template>
|
||||
<script>
|
||||
import { Message, iButton, Alert, Card } from 'iview';
|
||||
import { Message, Button, Alert, Card, Notice, iButton, Modal } from 'iview';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Message,
|
||||
iButton,
|
||||
Alert,
|
||||
Card
|
||||
Card,
|
||||
Notice,
|
||||
iButton,
|
||||
Modal
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
modal1: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
open () {
|
||||
Notice.open({
|
||||
duration: 1000,
|
||||
title: '这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
|
||||
})
|
||||
},
|
||||
info () {
|
||||
Message.info('欢迎来到iView', 1000, () => {
|
||||
console.log('close info');
|
||||
Notice.info({
|
||||
duration: 1000,
|
||||
title: '这是通知标题',
|
||||
// desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
|
||||
});
|
||||
},
|
||||
info2 () {
|
||||
Notice.open({
|
||||
duration: 1000,
|
||||
title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题'
|
||||
});
|
||||
Notice.info({
|
||||
duration: 1000,
|
||||
title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题'
|
||||
});
|
||||
Notice.open({
|
||||
duration: 1000,
|
||||
title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
|
||||
});
|
||||
Notice.info({
|
||||
duration: 1000,
|
||||
title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
|
||||
});
|
||||
Notice.success({
|
||||
duration: 1000,
|
||||
title: '这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
|
||||
});
|
||||
Notice.warning({
|
||||
duration: 1000,
|
||||
title: '这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
|
||||
});
|
||||
Notice.error({
|
||||
duration: 1000,
|
||||
title: '这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
|
||||
});
|
||||
},
|
||||
success () {
|
||||
Message.success('成功啦', 5, () => {
|
||||
console.log('close successs');
|
||||
Notice.success({
|
||||
duration: 1000,
|
||||
title: '这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
|
||||
});
|
||||
},
|
||||
warning () {
|
||||
Notice.warning({
|
||||
duration: 1000,
|
||||
title: '这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
|
||||
});
|
||||
},
|
||||
error () {
|
||||
Message.error('错误啦');
|
||||
Notice.error({
|
||||
duration: 1000,
|
||||
title: '这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
|
||||
});
|
||||
},
|
||||
warning () {
|
||||
Message.warning('来个警告');
|
||||
},
|
||||
loading () {
|
||||
const hide = Message.loading('我是loading', 0);
|
||||
|
||||
setTimeout(hide, 5000);
|
||||
},
|
||||
destroy () {
|
||||
Message.destroy();
|
||||
mInfo () {
|
||||
Message.info('飞机飞士大夫', 1000);
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
|
|
|
|||
|
|
@ -1,59 +1,13 @@
|
|||
<style>
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<Page :total="40" size="small"></Page>
|
||||
<Page :total="40" size="small" show-elevator show-sizer></Page>
|
||||
<Page :total="40" size="small" show-total></Page>
|
||||
<Page :total="100" show-sizer :page-size="5" :page-size-opts="[5,10,15,20]"></Page>
|
||||
<Page :total="1000" show-sizer show-elevator show-total></Page>
|
||||
<br><br>
|
||||
<Page :total="1000" show-sizer show-elevator show-total size="small"></Page>
|
||||
<br><br>
|
||||
<Page :current="2" :total="50" simple></Page>
|
||||
</template>
|
||||
<script>
|
||||
import { Modal, Button, Message, Page } from 'iview';
|
||||
|
||||
import { Page } from 'iview';
|
||||
export default {
|
||||
components: { Modal, Button, Page },
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
info () {
|
||||
Modal.info({
|
||||
title: '这是对话框标题',
|
||||
content: `<p>这是对话框内容</p><p>这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容</p>`
|
||||
});
|
||||
},
|
||||
success () {
|
||||
Modal.success();
|
||||
},
|
||||
warning () {
|
||||
Modal.warning();
|
||||
},
|
||||
error () {
|
||||
Modal.error();
|
||||
},
|
||||
confirm () {
|
||||
Modal.confirm({
|
||||
// okText: 'OK',
|
||||
// cancelText: 'Cancel',
|
||||
title: '删除提示',
|
||||
content: '删除后将不可找回，您确定要删除吗？',
|
||||
onCancel () {
|
||||
Message.info('cancel it');
|
||||
},
|
||||
onOk () {
|
||||
setTimeout(() => {
|
||||
Modal.remove();
|
||||
Message.success('OK!');
|
||||
}, 2000);
|
||||
},
|
||||
loading: true
|
||||
});
|
||||
}
|
||||
}
|
||||
components: { Page }
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -27,57 +27,105 @@
|
|||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
.tip{
|
||||
width: 24px;
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
.tip-inner{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: 1px solid #3399ff;
|
||||
color: #3399ff;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tip-content{
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
white-space: normal;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<Tooltip content="这里是提示文字">
|
||||
当鼠标经过这段文字时，会显示一个气泡框
|
||||
</Tooltip>
|
||||
<div class="tooltip_out">
|
||||
<Poptip>
|
||||
<a>click 激活</a>
|
||||
<div slot="title"><i>自定义标题</i></div>
|
||||
<div slot="content">
|
||||
<a>关闭提示框</a>
|
||||
</div>
|
||||
</Poptip>
|
||||
<Poptip placement="right" width="300">
|
||||
<i-button type="ghost">click 激活</i-button>
|
||||
<div class="api" slot="content">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>属性</th>
|
||||
<th>说明</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>content</td>
|
||||
<td>显示的内容</td>
|
||||
<td>String | Number</td>
|
||||
<td>空</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>placement</td>
|
||||
<td>提示框出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code></td>
|
||||
<td>String</td>
|
||||
<td>bottom</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>是否禁用提示框</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>delay</td>
|
||||
<td>延迟显示，单位毫秒</td>
|
||||
<td>Number</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Poptip>
|
||||
<!--<Tooltip placement="top" content="Tooltip 文字提示">-->
|
||||
<!--<strong>-->
|
||||
<!--<a>Link</a>-->
|
||||
<!--</strong>-->
|
||||
<!--</Tooltip>-->
|
||||
<!--<Poptip trigger="hover" title="提示标题" content="提示内容">-->
|
||||
<!--<i-button>hover 激活</i-button>-->
|
||||
<!--</Poptip>-->
|
||||
<!--<Poptip content="提示内容" title="tip">-->
|
||||
<!--<i-button>click 激活</i-button>-->
|
||||
<!--</Poptip>-->
|
||||
<!--<Poptip content="提示内容">-->
|
||||
<!--<div slot="title"><i>自定义标题</i></div>-->
|
||||
<!--<i-button>click 激活</i-button>-->
|
||||
<!--</Poptip>-->
|
||||
<!--<Tooltip class="tip" placement="left-start" trigger="hover">-->
|
||||
<!--<div class="tip-inner">-->
|
||||
<!--<Icon type="information"></Icon>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="tip-content" slot="content">-->
|
||||
<!--<p>iView 最新版本为 0.9.7，该版本对很多组件 UI 进行了调整</p>-->
|
||||
<!--</div>-->
|
||||
<!--</Tooltip>-->
|
||||
<!--<Poptip>-->
|
||||
<!--<a>click 激活</a>-->
|
||||
<!--<div slot="title"><i>自定义标题</i></div>-->
|
||||
<!--<div slot="content">-->
|
||||
<!--<a>关闭提示框</a>-->
|
||||
<!--</div>-->
|
||||
<!--</Poptip>-->
|
||||
<!--<Poptip placement="right" width="300">-->
|
||||
<!--<i-button type="ghost">click 激活</i-button>-->
|
||||
<!--<div class="api" slot="content">-->
|
||||
<!--<table>-->
|
||||
<!--<thead>-->
|
||||
<!--<tr>-->
|
||||
<!--<th>属性</th>-->
|
||||
<!--<th>说明</th>-->
|
||||
<!--<th>类型</th>-->
|
||||
<!--<th>默认值</th>-->
|
||||
<!--</tr>-->
|
||||
<!--</thead>-->
|
||||
<!--<tbody>-->
|
||||
<!--<tr>-->
|
||||
<!--<td>content</td>-->
|
||||
<!--<td>显示的内容</td>-->
|
||||
<!--<td>String | Number</td>-->
|
||||
<!--<td>空</td>-->
|
||||
<!--</tr>-->
|
||||
<!--<tr>-->
|
||||
<!--<td>placement</td>-->
|
||||
<!--<td>提示框出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code></td>-->
|
||||
<!--<td>String</td>-->
|
||||
<!--<td>bottom</td>-->
|
||||
<!--</tr>-->
|
||||
<!--<tr>-->
|
||||
<!--<td>disabled</td>-->
|
||||
<!--<td>是否禁用提示框</td>-->
|
||||
<!--<td>Boolean</td>-->
|
||||
<!--<td>false</td>-->
|
||||
<!--</tr>-->
|
||||
<!--<tr>-->
|
||||
<!--<td>delay</td>-->
|
||||
<!--<td>延迟显示，单位毫秒</td>-->
|
||||
<!--<td>Number</td>-->
|
||||
<!--<td>0</td>-->
|
||||
<!--</tr>-->
|
||||
<!--</tbody>-->
|
||||
<!--</table>-->
|
||||
<!--</div>-->
|
||||
<!--</Poptip>-->
|
||||
<!--<Poptip title="标题" content="内容">-->
|
||||
<!--<Button>click 触发</Button>-->
|
||||
<!--</Poptip>-->
|
||||
|
|
@ -96,19 +144,19 @@
|
|||
<!--<Tooltip content="这里是提示文字">-->
|
||||
<!--当鼠标经过这段文字时，会显示一个气泡框-->
|
||||
<!--</Tooltip>-->
|
||||
<Poptip>
|
||||
<a>click 激活</a>
|
||||
<div slot="content">
|
||||
<a>关闭提示框</a>
|
||||
</div>
|
||||
</Poptip>
|
||||
<!--<Poptip>-->
|
||||
<!--<a>click 激活</a>-->
|
||||
<!--<div slot="content">-->
|
||||
<!--<a>关闭提示框</a>-->
|
||||
<!--</div>-->
|
||||
<!--</Poptip>-->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message } from 'iview';
|
||||
import { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon } from 'iview';
|
||||
|
||||
export default {
|
||||
components: { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message },
|
||||
components: { Tooltip, iButton, Row, iCol, Poptip, iSelect, iOption, Message, Icon },
|
||||
props: {
|
||||
|
||||
},
|
||||
|
|
|
|||
|
|
@ -141,6 +141,8 @@
|
|||
<Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
|
||||
<Breadcrumb-item>Breadcrumb</Breadcrumb-item>
|
||||
</Breadcrumb>
|
||||
<br><br>
|
||||
<Checkbox :checked.sync="single"></Checkbox>
|
||||
</template>
|
||||
<script>
|
||||
import { Radio, Alert, Icon, Collapse, iButton, Checkbox, Switch, InputNumber, Breadcrumb, LoadingBar } from 'iview';
|
||||
|
|
@ -172,6 +174,7 @@
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
single: false,
|
||||
radio: false,
|
||||
radioGroup: '段模',
|
||||
activeKey: [1,2],
|
||||
|
|
|
|||
|
|
@ -1,26 +1,44 @@
|
|||
<template>
|
||||
<!--<i-select :model.sync="model1" style="width:200px">-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--{{ model1 | json }}-->
|
||||
<i-select :model.sync="model1" style="width:200px" clearable>
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
{{ model1 | json }}
|
||||
<i-button @click="change">修改数据</i-button>
|
||||
<!--<i-select :model.sync="model10" multiple style="width:240px" @on-change="datachange">-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--{{ model10 | json }}-->
|
||||
<!--<i-select :model.sync="model11" filterable style="width:200px" @on-change="datachange">-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--{{ model11 | json }}-->
|
||||
<i-select :model.sync="model10" multiple style="width:240px" @on-change="datachange">
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
{{ model10 | json }}
|
||||
<i-select :model.sync="model11" filterable style="width:200px" @on-change="datachange">
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
{{ model11 | json }}
|
||||
<i-select :model.sync="model12" filterable multiple style="width:240px" @on-change="datachange">
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
{{ model12 | json }}
|
||||
<br><br>
|
||||
<i-select :model.sync="model2" size="small" style="width:100px">
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
<i-select :model.sync="model3" style="width:100px">
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
<i-select :model.sync="model4" size="large" style="width:100px">
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
<i-select :model.sync="model7" style="width:200px">
|
||||
<i-option-group label="热门城市">
|
||||
<i-option v-for="item in cityList | limitBy 3" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-option-group>
|
||||
<i-option-group label="其它城市">
|
||||
<i-option v-for="item in cityList | limitBy 3 3" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-option-group>
|
||||
</i-select>
|
||||
</template>
|
||||
<script>
|
||||
import { iSelect, iOption, iButton } from 'iview';
|
||||
import { iSelect, iOption, iButton, iOptionGroup } from 'iview';
|
||||
export default {
|
||||
components: { iSelect, iOption, iButton },
|
||||
components: { iSelect, iOption, iButton, iOptionGroup },
|
||||
data () {
|
||||
return {
|
||||
cityList: [
|
||||
|
|
@ -36,23 +54,27 @@
|
|||
value: 'shenzhen',
|
||||
label: '深圳市'
|
||||
},
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: '杭州市'
|
||||
},
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: '南京市'
|
||||
},
|
||||
{
|
||||
value: 'chongqing',
|
||||
label: '重庆市'
|
||||
}
|
||||
// {
|
||||
// value: 'hangzhou',
|
||||
// label: '杭州市'
|
||||
// },
|
||||
// {
|
||||
// value: 'nanjing',
|
||||
// label: '南京市'
|
||||
// },
|
||||
// {
|
||||
// value: 'chongqing',
|
||||
// label: '重庆市'
|
||||
// }
|
||||
],
|
||||
model1: '',
|
||||
model10: [],
|
||||
model11: '',
|
||||
model12: []
|
||||
model12: [],
|
||||
model2: '',
|
||||
model3: '',
|
||||
model4: '',
|
||||
model7: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -31,10 +31,14 @@
|
|||
<i-button type="primary" @click="modal1 = true">显示对话框</i-button>
|
||||
<Modal
|
||||
:visible.sync="modal1"
|
||||
title="普通的Modal对话框标题">
|
||||
title="普通的Modal对话框标题"
|
||||
:loading="loading" @on-ok="ok">
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
{{ loading }}
|
||||
<i-button @click="loading = true">true</i-button>
|
||||
<i-button @click="loading = false">false</i-button>
|
||||
</Modal>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -43,7 +47,13 @@
|
|||
components: { Tag, Modal, iButton },
|
||||
data () {
|
||||
return {
|
||||
modal1: false
|
||||
modal1: false,
|
||||
loading: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
ok () {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
70
test/routers/tooltip.vue
Normal file
70
test/routers/tooltip.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<style scoped>
|
||||
.top,.bottom{
|
||||
text-align: center;
|
||||
}
|
||||
.center{
|
||||
width: 300px;
|
||||
margin: 10px auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.center-left{
|
||||
float: left;
|
||||
}
|
||||
.center-right{
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="top">
|
||||
<Tooltip content="Top Left 文字提示" placement="top-start">
|
||||
<i-button>上左</i-button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Top Center 文字提示" placement="top">
|
||||
<i-button>上边</i-button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Top Right 文字提示" placement="top-end">
|
||||
<i-button>上右</i-button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="center-left">
|
||||
<Tooltip content="Left Top 文字提示" placement="left-start">
|
||||
<i-button>左上</i-button>
|
||||
</Tooltip><br><br>
|
||||
<Tooltip content="Left Center 文字提示" placement="left">
|
||||
<i-button>左边</i-button>
|
||||
</Tooltip><br><br>
|
||||
<Tooltip content="Left Bottom 文字提示" placement="left-end">
|
||||
<i-button>左下</i-button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="center-right">
|
||||
<Tooltip content="Right Top 文字提示" placement="right-start">
|
||||
<i-button>右上</i-button>
|
||||
</Tooltip><br><br>
|
||||
<Tooltip content="Right Center 文字提示" placement="right">
|
||||
<i-button>右边</i-button>
|
||||
</Tooltip><br><br>
|
||||
<Tooltip content="Right Bottom 文字提示" placement="right-end">
|
||||
<i-button>右下</i-button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<Tooltip content="Bottom Left 文字提示" placement="bottom-start">
|
||||
<i-button>下左</i-button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Bottom Center 文字提示" placement="bottom">
|
||||
<i-button>下边</i-button>
|
||||
</Tooltip>
|
||||
<Tooltip content="Bottom Right 文字提示" placement="bottom-end">
|
||||
<i-button>下右</i-button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Tooltip, iButton } from 'iview';
|
||||
export default {
|
||||
components: { Tooltip, iButton }
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Reference in a new issue