feat(Field): highlight word num when reaching maxlength

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>
         );
       }

src/field/index.less

@@ -131,6 +131,12 @@
     text-align: right;
   }
 
+  &__word-num {
+    &--full {
+      color: @field-word-num-full-color;
+    }
+  }
+
   &--error {
     .van-field__control {
       &,

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">

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();
+});

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;