feat(Field): add digit type (#5524)

src/field/README.md

@@ -37,12 +37,10 @@ Use `type` prop to custom different type fields.
 
 ```html
 <van-field v-model="text" label="Text" />
-
-<van-field v-model="password" type="password" label="Password" />
-
-<van-field v-model="number" type="number" label="Number" />
-
 <van-field v-model="tel" type="tel" label="Phone" />
+<van-field v-model="digit" type="digit" label="Digit" />
+<van-field v-model="number" type="number" label="Number" />
+<van-field v-model="password" type="password" label="Password" />
 ```
 
 ```js
@@ -50,8 +48,9 @@ export default {
   data() {
     return {
       tel: '',
+      text: '',
+      digit: '',
       number: '',
-      username: '',
       password: ''
     };
   }
@@ -182,7 +181,7 @@ Textarea Field can be auto resize when has `autosize` prop
 |------|------|------|------|------|
 | value | Field value | *string \| number* | - | - |
 | label | Field label | *string* | - | - |
-| type | Input type, can be set to `tel` `number`<br>`textarea` `password` | *string* | `text` | - |
+| type | Input type, can be set to `tel` `digit`<br>`number` `textarea` `password` | *string* | `text` | - |
 | size | Size，can be set to `large` | *string* | - | - |
 | maxlength | Max length of value | *string \| number* | - | - |
 | placeholder | Placeholder | *string* | - | - |

src/field/README.zh-CN.md

@@ -41,17 +41,16 @@ export default {
 根据`type`属性定义不同类型的输入框，默认值为`text`
 
 ```html
-<!-- type="text" 可以输入任意文本 -->
+<!-- 输入任意文本 -->
 <van-field v-model="text" label="文本" />
-
+<!-- 输入手机号，调起手机号键盘 -->
-<!-- type="password" 表示输入密码 -->
-<van-field v-model="password" type="password" label="密码" />
-
-<!-- type="number" 允许输入数字和小数点，调起全键盘 -->
-<van-field v-model="number" type="number" label="数字" />
-
-<!-- type="tel" 输入手机号，调起手机号键盘 -->
 <van-field v-model="tel" type="tel" label="手机号" />
+<!-- 允许输入整数，调起数字键盘 -->
+<van-field v-model="digit" type="digit" label="整数" />
+<!-- 允许输入数字，调起全键盘 -->
+<van-field v-model="number" type="number" label="数字" />
+<!-- 输入密码 -->
+<van-field v-model="password" type="password" label="密码" />
 ```
 
 ```js
@@ -60,6 +59,7 @@ export default {
     return {
       tel: '',
       text: '',
+      digit: '',
       number: '',
       password: ''
     };
@@ -67,6 +67,8 @@ export default {
 }
 ```
 
+> Tips: digit 类型从 2.4.2 版本开始支持
+
 ### 禁用输入框
 
 通过`readonly`将输入框设置为只读状态，通过`disabled`将输入框设置为禁用状态
@@ -197,7 +199,7 @@ export default {
 |------|------|------|------|------|
 | label | 输入框左侧文本 | *string* | - | - |
 | value | 当前输入的值 | *string \| number* | - | - |
-| type | 输入框类型, 可选值为 `tel` `number`<br>`textarea` `password` 等 | *string* | `text` | - |
+| type | 输入框类型, 可选值为 `tel` `digit`<br>`number` `textarea` `password` 等 | *string* | `text` | - |
 | size | 大小，可选值为 `large` | *string* | - | - |
 | maxlength | 输入的最大字符数 | *string \| number* | - | - |
 | placeholder | 占位提示文字 | *string* | - | - |

src/field/demo/index.vue

@@ -15,10 +15,17 @@
         />
 
         <van-field
-          v-model="password"
+          v-model="phone"
-          type="password"
+          type="tel"
-          :label="$t('password')"
+          :label="$t('phone')"
-          :placeholder="$t('passwordPlaceholder')"
+          :placeholder="$t('phonePlaceholder')"
+        />
+
+        <van-field
+          v-model="digit"
+          type="digit"
+          :label="$t('digit')"
+          :placeholder="$t('digitPlaceholder')"
         />
 
         <van-field
@@ -29,10 +36,10 @@
         />
 
         <van-field
-          v-model="phone"
+          v-model="password"
-          type="tel"
+          type="password"
-          :label="$t('phone')"
+          :label="$t('password')"
-          :placeholder="$t('phonePlaceholder')"
+          :placeholder="$t('passwordPlaceholder')"
         />
       </van-cell-group>
     </demo-block>
@@ -141,6 +148,7 @@ export default {
       sms: '短信验证码',
       tel: '手机号',
       text: '文本',
+      digit: '整数',
       phone: '手机号',
       number: '数字',
       message: '留言',
@@ -151,7 +159,8 @@ export default {
       textareaAutosize: '高度自适应',
       smsPlaceholder: '请输入短信验证码',
       textPlaceholder: '请输入文本',
-      numberPlaceholder: '请输入数字',
+      digitPlaceholder: '请输入整数',
+      numberPlaceholder: '请输入数字（支持小数）',
       phonePlaceholder: '请输入手机号',
       messagePlaceholder: '请输入留言',
       inputReadonly: '输入框只读',
@@ -166,6 +175,7 @@ export default {
       sms: 'SMS',
       tel: 'Tel',
       text: 'Text',
+      digit: 'Digit',
       phone: 'Phone',
       number: 'Number',
       message: 'Message',
@@ -176,6 +186,7 @@ export default {
       textareaAutosize: 'Auto Resize',
       smsPlaceholder: 'SMS',
       textPlaceholder: 'Text',
+      digitPlaceholder: 'Digit',
       phonePlaceholder: 'Phone',
       numberPlaceholder: 'Number',
       messagePlaceholder: 'Message',
@@ -190,6 +201,7 @@ export default {
       sms: '',
       text: '',
       value: '',
+      digit: '',
       number: '',
       icon1: '',
       icon2: '123',

src/field/index.js

@@ -3,20 +3,12 @@ import Cell from '../cell';
 import { cellProps } from '../cell/shared';
 import { preventDefault } from '../utils/dom/event';
 import { resetScroll } from '../utils/dom/reset-scroll';
+import { isIOS } from '../utils/validate/system';
+import { formatNumber } from './utils';
 import { createNamespace, isObj, isDef, addUnit } from '../utils';
 
 const [createComponent, bem] = createNamespace('field');
 
-function formatNumber(value) {
-  const dotIndex = value.indexOf('.');
-
-  if (dotIndex > -1) {
-    value = value.slice(0, dotIndex + 1) + value.slice(dotIndex).replace(/\./g, '');
-  }
-
-  return value.replace(/[^0-9.]/g, '');
-}
-
 export default createComponent({
   inheritAttrs: false,
 
@@ -121,10 +113,11 @@ export default createComponent({
         target.value = value;
       }
 
-      if (this.type === 'number') {
+      if (this.type === 'number' || this.type === 'digit') {
         const originValue = value;
+        const allowDot = this.type === 'number';
 
-        value = formatNumber(value);
+        value = formatNumber(value, allowDot);
 
         if (value !== originValue) {
           target.value = value;
@@ -213,6 +206,7 @@ export default createComponent({
     },
 
     genInput() {
+      const { type } = this;
       const inputSlot = this.slots('input');
 
       if (inputSlot) {
@@ -239,18 +233,34 @@ export default createComponent({
         ]
       };
 
-      if (this.type === 'textarea') {
+      if (type === 'textarea') {
         return <textarea {...inputProps} />;
       }
 
+      let inputType = type;
+
       // type="number" is weired in iOS
-      const inputType = this.type === 'number' ? 'text' : this.type;
+      if (type === 'number') {
+        inputType = 'text';
+      }
+
+      if (type === 'digit') {
+        // set pattern to show number keyboard in iOS
+        if (isIOS()) {
+          inputType = 'number';
+          inputProps.attrs.pattern = '\\d*';
+          // cannot prevent dot when type is number in Android, so use tel
+        } else {
+          inputType = 'tel';
+        }
+      }
 
       return <input type={inputType} {...inputProps} />;
     },
 
     genLeftIcon() {
       const showLeftIcon = this.slots('left-icon') || this.leftIcon;
+
       if (showLeftIcon) {
         return (
           <div class={bem('left-icon')} onClick={this.onClickLeftIcon}>
@@ -263,6 +273,7 @@ export default createComponent({
     genRightIcon() {
       const { slots } = this;
       const showRightIcon = slots('right-icon') || this.rightIcon;
+
       if (showRightIcon) {
         return (
           <div class={bem('right-icon')} onClick={this.onClickRightIcon}>
@@ -289,6 +300,7 @@ export default createComponent({
     const scopedSlots = {
       icon: this.genLeftIcon
     };
+
     if (slots('label')) {
       scopedSlots.title = () => slots('label');
     }

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

@@ -20,21 +20,27 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>密码</span></div>
+        <div class="van-cell__title van-field__label"><span>手机号</span></div>
         <div class="van-cell__value">
-          <div class="van-field__body"><input type="password" placeholder="请输入密码" class="van-field__control"></div>
+          <div class="van-field__body"><input type="tel" placeholder="请输入手机号" class="van-field__control"></div>
+        </div>
+      </div>
+      <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="tel" placeholder="请输入整数" class="van-field__control"></div>
         </div>
       </div>
       <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 class="van-field__body"><input type="text" placeholder="请输入数字（支持小数）" class="van-field__control"></div>
         </div>
       </div>
       <div class="van-cell van-field">
-        <div class="van-cell__title van-field__label"><span>手机号</span></div>
+        <div class="van-cell__title van-field__label"><span>密码</span></div>
         <div class="van-cell__value">
-          <div class="van-field__body"><input type="tel" placeholder="请输入手机号" class="van-field__control"></div>
+          <div class="van-field__body"><input type="password" placeholder="请输入密码" class="van-field__control"></div>
         </div>
       </div>
     </div>

src/field/test/index.spec.js

@@ -56,6 +56,29 @@ test('number type', () => {
   expect(wrapper.emitted('input')[2][0]).toEqual('123');
 });
 
+test('digit type', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      value: '',
+      type: 'digit'
+    }
+  });
+
+  const input = wrapper.find('input');
+
+  input.element.value = '1';
+  input.trigger('input');
+  expect(wrapper.emitted('input')[0][0]).toEqual('1');
+
+  input.element.value = '1.';
+  input.trigger('input');
+  expect(wrapper.emitted('input')[1][0]).toEqual('1');
+
+  input.element.value = '123abc';
+  input.trigger('input');
+  expect(wrapper.emitted('input')[2][0]).toEqual('123');
+});
+
 test('render textarea', async () => {
   const wrapper = mount(Field, {
     propsData: {

src/field/utils.ts

@@ -0,0 +1,14 @@
+export function formatNumber(value: string, allowDot: boolean) {
+  if (allowDot) {
+    const dotIndex = value.indexOf('.');
+
+    if (dotIndex > -1) {
+      value =
+        value.slice(0, dotIndex + 1) + value.slice(dotIndex).replace(/\./g, '');
+    }
+  }
+
+  const regExp = allowDot ? /[^0-9.]/g : /\D/g;
+
+  return value.replace(regExp, '');
+}