Input add show-word-limit prop
This commit is contained in:
parent
3f8cb7fd31
commit
95d0f5ea7e
2 changed files with 38 additions and 1 deletions
|
@ -6,6 +6,7 @@
|
||||||
<i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
|
<i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
|
||||||
<i class="ivu-icon ivu-icon-ios-search" :class="[prefixCls + '-icon', prefixCls + '-icon-normal', prefixCls + '-search-icon']" v-else-if="search && enterButton === false" @click="handleSearch"></i>
|
<i class="ivu-icon ivu-icon-ios-search" :class="[prefixCls + '-icon', prefixCls + '-icon-normal', prefixCls + '-search-icon']" v-else-if="search && enterButton === false" @click="handleSearch"></i>
|
||||||
<span class="ivu-input-suffix" v-else-if="showSuffix"><slot name="suffix"><i class="ivu-icon" :class="['ivu-icon-' + suffix]" v-if="suffix"></i></slot></span>
|
<span class="ivu-input-suffix" v-else-if="showSuffix"><slot name="suffix"><i class="ivu-icon" :class="['ivu-icon-' + suffix]" v-if="suffix"></i></slot></span>
|
||||||
|
<span class="ivu-input-word-count" v-else-if="showWordLimit"><span class="ivu-input-word-count-inner">{{ textLength }}/{{ upperLimit }}</span></span>
|
||||||
<transition name="fade">
|
<transition name="fade">
|
||||||
<i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
|
<i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
|
||||||
</transition>
|
</transition>
|
||||||
|
@ -106,7 +107,7 @@
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
maxlength: {
|
maxlength: {
|
||||||
type: Number
|
type: [String, Number]
|
||||||
},
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
@ -172,6 +173,11 @@
|
||||||
enterButton: {
|
enterButton: {
|
||||||
type: [Boolean, String],
|
type: [Boolean, String],
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
// 4.0.0
|
||||||
|
showWordLimit: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
|
@ -237,6 +243,16 @@
|
||||||
[`${prefixCls}-disabled`]: this.disabled
|
[`${prefixCls}-disabled`]: this.disabled
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
},
|
||||||
|
upperLimit () {
|
||||||
|
return this.maxlength;
|
||||||
|
},
|
||||||
|
textLength () {
|
||||||
|
if (typeof this.value === 'number') {
|
||||||
|
return String(this.value).length;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (this.value || '').length;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
@ -164,6 +164,27 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-word-count{
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
right: @input-padding-horizontal;
|
||||||
|
top: 1px;
|
||||||
|
bottom: 1px;
|
||||||
|
padding-left: @input-padding-horizontal;
|
||||||
|
background: #fff;
|
||||||
|
z-index: 1;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
color: @subsidiary-color;
|
||||||
|
font-size: @font-size-small;
|
||||||
|
&-inner{
|
||||||
|
display: inline-block;
|
||||||
|
background: #fff;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{input-prefix-cls}-group{
|
.@{input-prefix-cls}-group{
|
||||||
|
|
Loading…
Add table
Reference in a new issue