feat(Field): add formatter prop (#5534)

src/field/README.md

@@ -126,17 +126,43 @@ Use `error` or `error-message` to show error info
 Use button slot to insert button
 
 ```html
-<van-cell-group>
+<van-field
-  <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-field>
-</van-cell-group>
+```
+
+### Format Value
+
+Use `formatter` prop to format the input value
+
+```html
+<van-field
+  v-model="value"
+  label="Text"
+  :formatter="formatter"
+  placeholder="Format Value"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      value: ''
+    };
+  },
+  methods: {
+    formatter(value) {
+      return value.replace(/\d/g, '');
+    }
+  }
+}
 ```
 
 ### Auto Resize
@@ -144,33 +170,29 @@ Use button slot to insert button
 Textarea Field can be auto resize when has `autosize` prop
 
 ```html
-<van-cell-group>
+<van-field
-  <van-field
   v-model="message"
   label="Message"
   type="textarea"
   placeholder="Message"
   rows="1"
   autosize
-  />
+/>
-</van-cell-group>
 ```
 
 ### Show Word Limit
 
 ```html
-<van-cell-group>
+<van-field
-  <van-field
   v-model="message"
   rows="2"
   autosize
-    label="留言"
+  label="Message"
   type="textarea"
   maxlength="50"
-    placeholder="请输入留言"
+  placeholder="Message"
   show-word-limit
-  />
+/>
-</van-cell-group>
 ```
 
 ## API
@@ -195,6 +217,7 @@ Textarea Field can be auto resize when has `autosize` prop
 | autofocus | Whether to auto focus, unsupported in iOS | *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` | - |
+| formatter | Input value formatter | *Function* | - | 2.4.2 |
 | arrow-direction | Can be set to `left` `up` `down` | *string* | - | 2.0.4 |
 | error-message | Error message | *string* | `''` | - |
 | label-class | Label className | *any* | - | - |

src/field/README.zh-CN.md

@@ -142,17 +142,44 @@ export default {
 通过 button 插槽可以在输入框尾部插入按钮
 
 ```html
-<van-cell-group>
+<van-field
-  <van-field
   v-model="sms"
   center
   clearable
   label="短信验证码"
   placeholder="请输入短信验证码"
-  >
+>
   <van-button slot="button" size="small" type="primary">发送验证码</van-button>
-  </van-field>
+</van-field>
-</van-cell-group>
+```
+
+### 格式化输入内容
+
+通过`formatter`属性可以对输入的内容进行格式化
+
+```html
+<van-field
+  v-model="value"
+  label="文本"
+  :formatter="formatter"
+  placeholder="格式化输入内容"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      value: ''
+    };
+  },
+  methods: {
+    formatter(value) {
+      // 过滤输入的数字
+      return value.replace(/\d/g, '');
+    }
+  }
+}
 ```
 
 ### 高度自适应
@@ -160,16 +187,14 @@ export default {
 对于 textarea，可以通过`autosize`属性设置高度自适应
 
 ```html
-<van-cell-group>
+<van-field
-  <van-field
   v-model="message"
   rows="1"
   autosize
   label="留言"
   type="textarea"
   placeholder="请输入留言"
-  />
+/>
-</van-cell-group>
 ```
 
 ### 显示字数统计
@@ -177,8 +202,7 @@ export default {
 设置`maxlength`和`show-word-limit`属性后会在底部显示字数统计
 
 ```html
-<van-cell-group>
+<van-field
-  <van-field
   v-model="message"
   rows="2"
   autosize
@@ -187,8 +211,7 @@ export default {
   maxlength="50"
   placeholder="请输入留言"
   show-word-limit
-  />
+/>
-</van-cell-group>
 ```
 
 ## API
@@ -213,6 +236,7 @@ export default {
 | autofocus | 是否自动聚焦，iOS 系统不支持该属性 | *boolean* | `false` | - |
 | show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | *boolean* | `false` | 2.2.8 |
 | error | 是否将输入内容标红 | *boolean* | `false` | - |
+| formatter | 输入内容格式化函数 | *Function* | - | 2.4.2 |
 | arrow-direction | 箭头方向，可选值为 `left` `up` `down` | *string* | - | 2.0.4 |
 | error-message | 底部错误提示文案，为空时不展示 | *string* | `''` | - 
 | label-class | 左侧文本额外类名 | *any* | - | - |
@@ -220,7 +244,7 @@ export default {
 | label-align | 左侧文本对齐方式，可选值为 `center` `right` | *string* | `left` | - |
 | input-align | 输入框内容对齐方式，可选值为 `center` `right` | *string* | `left` | - |
 | error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | *string* | `left` | - |
-| autosize | 自适应内容高度，只对 textarea 有效，可传入对象,<br>如 { maxHeight: 100, minHeight: 50 }，单位为`px` | *boolean \| object* | `false` | - |
+| autosize | 是否自适应内容高度，只对 textarea 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`px` | *boolean \| object* | `false` | - |
 | left-icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/zh-CN/icon) | *string* | - | - |
 | right-icon | 右侧图标名称或图片链接，可选值见 [Icon 组件](#/zh-CN/icon) | *string* | - | - |
 

src/field/demo/index.vue

@@ -6,7 +6,7 @@
       </van-cell-group>
     </demo-block>
 
-    <demo-block :title="$t('title2')">
+    <demo-block :title="$t('customType')">
       <van-cell-group>
         <van-field
           v-model="text"
@@ -44,7 +44,7 @@
       </van-cell-group>
     </demo-block>
 
-    <demo-block :title="$t('title3')">
+    <demo-block :title="$t('disabled')">
       <van-cell-group>
         <van-field :value="$t('inputReadonly')" :label="$t('text')" readonly />
         <van-field :value="$t('inputDisabled')" :label="$t('text')" disabled />
@@ -70,7 +70,7 @@
       </van-cell-group>
     </demo-block>
 
-    <demo-block :title="$t('title4')">
+    <demo-block :title="$t('errorInfo')">
       <van-cell-group>
         <van-field
           v-model="username"
@@ -89,7 +89,7 @@
       </van-cell-group>
     </demo-block>
 
-    <demo-block :title="$t('title6')">
+    <demo-block :title="$t('insertButton')">
       <van-cell-group>
         <van-field
           center
@@ -107,6 +107,17 @@
       </van-cell-group>
     </demo-block>
 
+    <demo-block v-if="!isWeapp" :title="$t('formatValue')">
+      <van-cell-group>
+        <van-field
+          v-model="formatValue"
+          :label="$t('text')"
+          :formatter="formatter"
+          :placeholder="$t('formatValue')"
+        />
+      </van-cell-group>
+    </demo-block>
+
     <demo-block :title="$t('textareaAutosize')">
       <van-cell-group>
         <van-field
@@ -141,58 +152,60 @@
 export default {
   i18n: {
     'zh-CN': {
-      title2: '自定义类型',
-      title3: '禁用输入框',
-      title4: '错误提示',
-      title6: '插入按钮',
-      sms: '短信验证码',
       tel: '手机号',
+      sms: '短信验证码',
       text: '文本',
       digit: '整数',
       phone: '手机号',
       number: '数字',
       message: '留言',
       sendSMS: '发送验证码',
+      disabled: '禁用输入框',
       showIcon: '显示图标',
+      errorInfo: '错误提示',
+      customType: '自定义类型',
+      phoneError: '手机号格式错误',
+      formatValue: '格式化输入内容',
+      insertButton: '插入按钮',
       showClearIcon: '显示清除图标',
       showWordLimit: '显示字数统计',
-      textareaAutosize: '高度自适应',
+      inputReadonly: '输入框只读',
+      inputDisabled: '输入框已禁用',
       smsPlaceholder: '请输入短信验证码',
       textPlaceholder: '请输入文本',
       digitPlaceholder: '请输入整数',
-      numberPlaceholder: '请输入数字（支持小数）',
       phonePlaceholder: '请输入手机号',
-      messagePlaceholder: '请输入留言',
+      textareaAutosize: '高度自适应',
-      inputReadonly: '输入框只读',
+      numberPlaceholder: '请输入数字（支持小数）',
-      inputDisabled: '输入框已禁用',
+      messagePlaceholder: '请输入留言'
-      phoneError: '手机号格式错误'
     },
     'en-US': {
-      title2: 'Custom Type',
-      title3: 'Disabled',
-      title4: 'Error Info',
-      title6: 'Insert Button',
-      sms: 'SMS',
       tel: 'Tel',
+      sms: 'SMS',
       text: 'Text',
       digit: 'Digit',
       phone: 'Phone',
       number: 'Number',
       message: 'Message',
       sendSMS: 'Send SMS',
+      disabled: 'Disabled',
       showIcon: 'Show Icon',
+      errorInfo: 'Error Info',
+      customType: 'Custom Type',
+      phoneError: 'Invalid phone',
+      formatValue: 'Format Value',
+      insertButton: 'Insert Button',
       showClearIcon: 'Show Clear Icon',
       showWordLimit: 'Show Word Limit',
-      textareaAutosize: 'Auto Resize',
+      inputReadonly: 'Input Readonly',
+      inputDisabled: 'Input Disabled',
       smsPlaceholder: 'SMS',
       textPlaceholder: 'Text',
       digitPlaceholder: 'Digit',
       phonePlaceholder: 'Phone',
+      textareaAutosize: 'Auto Resize',
       numberPlaceholder: 'Number',
-      messagePlaceholder: 'Message',
+      messagePlaceholder: 'Message'
-      inputReadonly: 'Input Readonly',
-      inputDisabled: 'Input Disabled',
-      phoneError: 'Invalid phone'
     }
   },
 
@@ -211,8 +224,15 @@ export default {
       message: '',
       message2: '',
       phone: '',
-      phone2: '12345'
+      phone2: '12345',
+      formatValue: ''
     };
+  },
+
+  methods: {
+    formatter(value) {
+      return value.replace(/\d/g, '');
+    }
   }
 };
 </script>

src/field/index.js

@@ -20,6 +20,7 @@ export default createComponent({
     leftIcon: String,
     rightIcon: String,
     clearable: Boolean,
+    formatter: Function,
     maxlength: [Number, String],
     labelWidth: [Number, String],
     labelClass: null,
@@ -99,7 +100,6 @@ export default createComponent({
       }
     },
 
-    // native maxlength not work when type = number
     format(target = this.$refs.input) {
       if (!target) {
         return;
@@ -108,6 +108,7 @@ export default createComponent({
       let { value } = target;
       const { maxlength } = this;
 
+      // native maxlength not work when type is number
       if (isDef(maxlength) && value.length > maxlength) {
         value = value.slice(0, maxlength);
         target.value = value;
@@ -124,6 +125,16 @@ export default createComponent({
         }
       }
 
+      if (this.formatter) {
+        const originValue = value;
+
+        value = this.formatter(value);
+
+        if (value !== originValue) {
+          target.value = value;
+        }
+      }
+
       return value;
     },
 

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

@@ -115,6 +115,16 @@ 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"><input type="text" placeholder="格式化输入内容" class="van-field__control"></div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
       <div class="van-cell van-field">

src/field/test/index.spec.js

@@ -262,3 +262,21 @@ test('arrow-direction prop', () => {
   });
   expect(wrapper).toMatchSnapshot();
 });
+
+test('formatter prop', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      value: 'abc123',
+      formatter: (value) => value.replace(/\d/g, '')
+    }
+  });
+
+  const input = wrapper.find('input');
+
+  input.trigger('input');
+  expect(wrapper.emitted('input')[0][0]).toEqual('abc');
+
+  input.element.value = '123efg';
+  input.trigger('input');
+  expect(wrapper.emitted('input')[1][0]).toEqual('efg');
+});