feat(Field): add show-word-limit prop (#4721)

src/field/README.md

@@ -21,7 +21,7 @@ The value of field is bound with v-model.
 </van-cell-group>
 ```
 
-### Custom type
+### Custom Type
 
 Use `type` prop to custom different type fields.
 
@@ -60,7 +60,7 @@ Use `type` prop to custom different type fields.
 </van-cell-group>
 ```
 
-### Error info
+### Error Info
 
 Use `error` or `error-message` to show error info
 
@@ -81,7 +81,25 @@ Use `error` or `error-message` to show error info
 </van-cell-group>
 ```
 
-### Auto resize
+### Insert Button
+
+Use button slot to insert button
+
+```html
+<van-cell-group>
+  <van-field
+    v-model="sms"
+    center
+    clearable
+    label="SMS"
+    placeholder="SMS"
+  >
+    <van-button slot="button" size="small" type="primary">Send SMS</van-button>
+  </van-field>
+</van-cell-group>
+```
+
+### Auto Resize
 
 Textarea Field can be auto resize when has `autosize` prop
 
@@ -98,21 +116,20 @@ Textarea Field can be auto resize when has `autosize` prop
 </van-cell-group>
 ```
 
-### Insert button
+### Show Word Limit
-
-Use button slot to insert button
 
 ```html
 <van-cell-group>
   <van-field
-    v-model="sms"
+    v-model="message"
-    center
+    rows="2"
-    clearable
+    autosize
-    label="SMS"
+    label="留言"
-    placeholder="SMS"
+    type="textarea"
-  >
+    maxlength="50"
-    <van-button slot="button" size="small" type="primary">Send SMS</van-button>
+    placeholder="请输入留言"
-  </van-field>
+    show-word-limit
+  />
 </van-cell-group>
 ```
 
@@ -135,6 +152,7 @@ Use button slot to insert button
 | clearable | Whether to be clearable | *boolean* | `false` | - |
 | clickable | Whether to show click feedback when clicked | *boolean* | `false` | - |
 | is-link | Whether to show link icon | *boolean* | `false` | - |
+| show-word-limit | Whether to show word limit, need to set the `maxlength` prop | *boolean* | `false` | 2.2.8 |
 | error | Whether to show error info | *boolean* | `false` | - |
 | arrow-direction | Can be set to `left` `up` `down` | *string* | - | 2.0.4 |
 | error-message | Error message | *string* | `''` | - |

src/field/README.zh-CN.md

@@ -85,23 +85,6 @@ Vue.use(Field);
 </van-cell-group>
 ```
 
-### 高度自适应
-
-对于 textarea，可以通过`autosize`属性设置高度自适应
-
-```html
-<van-cell-group>
-  <van-field
-    v-model="message"
-    label="留言"
-    type="textarea"
-    placeholder="请输入留言"
-    rows="1"
-    autosize
-  />
-</van-cell-group>
-```
-
 ### 插入按钮
 
 通过 button 插槽可以在输入框尾部插入按钮
@@ -120,6 +103,42 @@ Vue.use(Field);
 </van-cell-group>
 ```
 
+### 高度自适应
+
+对于 textarea，可以通过`autosize`属性设置高度自适应
+
+```html
+<van-cell-group>
+  <van-field
+    v-model="message"
+    rows="1"
+    autosize
+    label="留言"
+    type="textarea"
+    placeholder="请输入留言"
+  />
+</van-cell-group>
+```
+
+### 显示字数统计
+
+设置`maxlength`和`show-word-limit`属性后会在底部显示字数统计
+
+```html
+<van-cell-group>
+  <van-field
+    v-model="message"
+    rows="2"
+    autosize
+    label="留言"
+    type="textarea"
+    maxlength="50"
+    placeholder="请输入留言"
+    show-word-limit
+  />
+</van-cell-group>
+```
+
 ## API
 
 ### Props
@@ -139,6 +158,7 @@ Vue.use(Field);
 | clearable | 是否启用清除控件 | *boolean* | `false` | - |
 | clickable | 是否开启点击反馈 | *boolean* | `false` | - |
 | is-link | 是否展示右侧箭头并开启点击反馈 | *boolean* | `false` | - |
+| show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` | 2.2.8 |
 | error | 是否将输入内容标红 | *boolean* | `false` | - |
 | arrow-direction | 箭头方向，可选值为 `left` `up` `down` | *string* | - | 2.0.4 |
 | error-message | 底部错误提示文案，为空时不展示 | *string* | `''` | - 

src/field/demo/index.vue

@@ -59,19 +59,6 @@
       </van-cell-group>
     </demo-block>
 
-    <demo-block :title="$t('title5')">
-      <van-cell-group>
-        <van-field
-          v-model="message"
-          :label="$t('message')"
-          type="textarea"
-          :placeholder="$t('messagePlaceholder')"
-          rows="1"
-          autosize
-        />
-      </van-cell-group>
-    </demo-block>
-
     <demo-block :title="$t('title6')">
       <van-cell-group>
         <van-field
@@ -92,6 +79,34 @@
         </van-field>
       </van-cell-group>
     </demo-block>
+
+    <demo-block :title="$t('textareaAutosize')">
+      <van-cell-group>
+        <van-field
+          v-model="message"
+          :label="$t('message')"
+          type="textarea"
+          :placeholder="$t('messagePlaceholder')"
+          rows="1"
+          autosize
+        />
+      </van-cell-group>
+    </demo-block>
+
+    <demo-block v-if="!$attrs.weapp" :title="$t('showWordLimit')">
+      <van-cell-group>
+        <van-field
+          v-model="message2"
+          :label="$t('message')"
+          :placeholder="$t('messagePlaceholder')"
+          rows="2"
+          autosize
+          maxlength="50"
+          type="textarea"
+          show-word-limit
+        />
+      </van-cell-group>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -102,12 +117,13 @@ export default {
       title2: '自定义类型',
       title3: '禁用输入框',
       title4: '错误提示',
-      title5: '高度自适应',
       title6: '插入按钮',
       message: '留言',
       phone: '手机号',
       sms: '短信验证码',
       sendSMS: '发送验证码',
+      showWordLimit: '显示字数统计',
+      textareaAutosize: '高度自适应',
       smsPlaceholder: '请输入短信验证码',
       phonePlaceholder: '请输入手机号',
       messagePlaceholder: '请输入留言',
@@ -115,15 +131,16 @@ export default {
       phoneError: '手机号格式错误'
     },
     'en-US': {
-      title2: 'Custom type',
+      title2: 'Custom Type',
       title3: 'Disabled',
-      title4: 'Error info',
+      title4: 'Error Info',
-      title5: 'Auto resize',
+      title6: 'Insert Button',
-      title6: 'Insert button',
       message: 'Message',
       phone: 'Phone',
       sms: 'SMS',
       sendSMS: 'Send SMS',
+      showWordLimit: 'Show Word Limit',
+      textareaAutosize: 'Auto Resize',
       smsPlaceholder: 'SMS',
       phonePlaceholder: 'Phone',
       messagePlaceholder: 'Message',
@@ -140,6 +157,7 @@ export default {
       username: '',
       username2: '',
       message: '',
+      message2: '',
       phone: '1365577'
     };
   }

src/field/index.js

@@ -24,6 +24,7 @@ export default createComponent({
     inputAlign: String,
     errorMessage: String,
     errorMessageAlign: String,
+    showWordLimit: Boolean,
     type: {
       type: String,
       default: 'text'
@@ -260,6 +261,16 @@ export default createComponent({
           </div>
         );
       }
+    },
+
+    renderWordLimit() {
+      if (this.showWordLimit && this.$attrs.maxlength) {
+        return (
+          <div class={bem('word-limit')}>
+            {this.value.length}/{this.$attrs.maxlength}
+          </div>
+        );
+      }
     }
   },
 
@@ -302,6 +313,7 @@ export default createComponent({
           {this.renderRightIcon()}
           {slots('button') && <div class={bem('button')}>{slots('button')}</div>}
         </div>
+        {this.renderWordLimit()}
         {this.errorMessage && (
           <div class={bem('error-message', this.errorMessageAlign)}>
             {this.errorMessage}

src/field/index.less

@@ -117,6 +117,12 @@
     }
   }
 
+  &__word-limit {
+    color: @field-word-limit-color;
+    font-size: @field-word-limit-font-size;
+    line-height: @field-word-limit-line-height;
+  }
+
   &--error {
     .van-field__control {
       &,

src/field/test/__snapshots__/demo.spec.js.snap

@@ -59,16 +59,6 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
-  <div>
-    <div class="van-cell-group van-hairline--top-bottom">
-      <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>留言</span></div>
-        <div class="van-cell__value">
-          <div class="van-field__body"><textarea placeholder="请输入留言" rows="1" class="van-field__control" style="height: auto;"></textarea></div>
-        </div>
-      </div>
-    </div>
-  </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
       <div class="van-cell van-cell--center van-field">
@@ -83,5 +73,26 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-cell-group van-hairline--top-bottom">
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label"><span>留言</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><textarea placeholder="请输入留言" rows="1" class="van-field__control" style="height: auto;"></textarea></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-cell-group van-hairline--top-bottom">
+      <div class="van-cell van-field">
+        <div class="van-cell__title van-field__label"><span>留言</span></div>
+        <div class="van-cell__value">
+          <div class="van-field__body"><textarea placeholder="请输入留言" rows="2" maxlength="50" class="van-field__control" style="height: auto;"></textarea></div>
+          <div class="van-field__word-limit">0/50</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;

src/style/var.less

@@ -292,6 +292,9 @@
 @field-error-message-color: @red;
 @field-error-message-text-color: 12px;
 @field-text-area-min-height: 60px;
+@field-word-limit-color: @gray-darker;
+@field-word-limit-font-size: @font-size-sm;
+@field-word-limit-line-height: 16px;
 
 // GridItem
 @grid-item-content-padding: @padding-md @padding-xs;