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 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: {
|
||||
|
|
|
@ -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{
|
||||
|
|
Loading…
Add table
Reference in a new issue