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{