diff --git a/src/components/input/input.vue b/src/components/input/input.vue index d107830f..8f9936e9 100644 --- a/src/components/input/input.vue +++ b/src/components/input/input.vue @@ -6,6 +6,7 @@ + {{ textLength }}/{{ upperLimit }} @@ -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: { diff --git a/src/styles/components/input.less b/src/styles/components/input.less index d02ae977..9191e7ab 100644 --- a/src/styles/components/input.less +++ b/src/styles/components/input.less @@ -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{