From 61093ef00f2dc421eb94ec7690093c1d565a296c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Wed, 5 Feb 2020 15:58:51 +0800
Subject: [PATCH] feat(Field): highlight word num when reaching maxlength

---
 src/field/index.js                              |  6 +++++-
 src/field/index.less                            |  6 ++++++
 src/field/test/__snapshots__/index.spec.js.snap |  9 +++++++++
 src/field/test/index.spec.js                    | 11 +++++++++++
 src/style/var.less                              |  1 +
 5 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/field/index.js b/src/field/index.js
index e45666d08..32b58c80c 100644
--- a/src/field/index.js
+++ b/src/field/index.js
@@ -303,9 +303,13 @@ export default createComponent({
 
     genWordLimit() {
       if (this.showWordLimit && this.maxlength) {
+        const count = this.value.length;
+        const full = count >= this.maxlength;
+
         return (
           <div class={bem('word-limit')}>
-            {this.value.length}/{this.maxlength}
+            <span class={bem('word-num', { full })}>{count}</span>/
+            {this.maxlength}
           </div>
         );
       }
diff --git a/src/field/index.less b/src/field/index.less
index 4377a9b33..f7ba70439 100644
--- a/src/field/index.less
+++ b/src/field/index.less
@@ -131,6 +131,12 @@
     text-align: right;
   }
 
+  &__word-num {
+    &--full {
+      color: @field-word-num-full-color;
+    }
+  }
+
   &--error {
     .van-field__control {
       &,
diff --git a/src/field/test/__snapshots__/index.spec.js.snap b/src/field/test/__snapshots__/index.spec.js.snap
index d7af6becf..0938a1696 100644
--- a/src/field/test/__snapshots__/index.spec.js.snap
+++ b/src/field/test/__snapshots__/index.spec.js.snap
@@ -53,6 +53,15 @@ exports[`label-width prop without unit 1`] = `
 </div>
 `;
 
+exports[`reach max word-limit 1`] = `
+<div class="van-cell van-field">
+  <div class="van-cell__value van-cell__value--alone">
+    <div class="van-field__body"><input type="text" class="van-field__control"></div>
+    <div class="van-field__word-limit"><span class="van-field__word-num van-field__word-num--full">3</span>/3</div>
+  </div>
+</div>
+`;
+
 exports[`render input slot 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__value van-cell__value--alone">
diff --git a/src/field/test/index.spec.js b/src/field/test/index.spec.js
index 8100c5103..6554f4150 100644
--- a/src/field/test/index.spec.js
+++ b/src/field/test/index.spec.js
@@ -280,3 +280,14 @@ test('formatter prop', () => {
   input.trigger('input');
   expect(wrapper.emitted('input')[1][0]).toEqual('efg');
 });
+
+test('reach max word-limit', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      value: 'foo',
+      maxlength: 3,
+      showWordLimit: true,
+    },
+  });
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/style/var.less b/src/style/var.less
index 54f6f57ea..36b2e00b5 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -345,6 +345,7 @@
 @field-word-limit-color: @gray-7;
 @field-word-limit-font-size: @font-size-sm;
 @field-word-limit-line-height: 16px;
+@field-word-num-full-color: @red;
 
 // GridItem
 @grid-item-content-padding: @padding-md @padding-xs;