From 95d0f5ea7ef91ec11f3a00e9757a93c5210157b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Sat, 14 Sep 2019 12:15:51 +0800
Subject: [PATCH] Input add show-word-limit prop

---
 src/components/input/input.vue   | 18 +++++++++++++++++-
 src/styles/components/input.less | 21 +++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

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