Input add show-word-limit prop

This commit is contained in:
梁灏 2019-09-14 12:15:51 +08:00
parent 3f8cb7fd31
commit 95d0f5ea7e
2 changed files with 38 additions and 1 deletions

View file

@ -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 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-word-count" v-else-if="showWordLimit"><span class="ivu-input-word-count-inner">{{ textLength }}/{{ upperLimit }}</span></span>
<transition name="fade">
<i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
</transition>
@ -106,7 +107,7 @@
default: ''
},
maxlength: {
type: Number
type: [String, Number]
},
disabled: {
type: Boolean,
@ -172,6 +173,11 @@
enterButton: {
type: [Boolean, String],
default: false
},
// 4.0.0
showWordLimit: {
type: Boolean,
default: false
}
},
data () {
@ -237,6 +243,16 @@
[`${prefixCls}-disabled`]: this.disabled
}
];
},
upperLimit () {
return this.maxlength;
},
textLength () {
if (typeof this.value === 'number') {
return String(this.value).length;
}
return (this.value || '').length;
}
},
methods: {

View file

@ -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{