[new feature] Number: support v-model (#3531)

packages/number-keyboard/demo/index.vue

@@ -38,6 +38,24 @@
         @delete="onDelete"
       />
     </demo-block>
+
+    <demo-block :title="$t('bindValue')">
+      <van-field
+        readonly
+        clickable
+        :value="value"
+        :placeholder="$t('clickToInput')"
+        @touchstart.native.stop="keyboard = 'bindValue'"
+      />
+
+      <van-number-keyboard
+        v-model="value"
+        :show="keyboard === 'bindValue'"
+        :close-button-text="$t('close')"
+        safe-area-inset-bottom
+        @blur="keyboard = ''"
+      />
+    </demo-block>
   </demo-section>
 </template>
 
@@ -50,7 +68,9 @@ export default {
       button1: '弹出默认键盘',
       button2: '弹出自定义键盘',
       close: '完成',
-      input: '输入'
+      input: '输入',
+      bindValue: '双向绑定',
+      clickToInput: '点此输入'
     },
     'en-US': {
       default: 'Default style',
@@ -58,12 +78,15 @@ export default {
       button1: 'Show Default Keyboard',
       button2: 'Show Custom Keyboard',
       close: 'Close',
-      input: 'Input'
+      input: 'Input',
+      bindValue: 'Bind Value',
+      clickToInput: 'Click To Input'
     }
   },
 
   data() {
     return {
+      value: '',
       keyboard: 'default'
     };
   },

packages/number-keyboard/en-US.md

@@ -59,12 +59,41 @@ export default {
 />
 ```
 
+### Bind Value
+
+```html
+<van-field
+  readonly
+  clickable
+  :value="value"
+  @touchstart.native.stop="show = true"
+/>
+
+<van-number-keyboard
+  v-model="value"
+  :show="show"
+  @blur="show = false"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show: false,
+      value: ''
+    }
+  }
+}
+```
+
 ## API
 
 ### Props
 
 | Attribute | Description | Type | Default |
 |------|------|------|------|
+| v-model | Current value | `String` | - |
 | show | Whether to show keyboard | `Boolean` | - |
 | theme | Keyboard theme，can be set to `default` `custom` | `String` | `default` |
 | title | Keyboard title | `String` | - |

packages/number-keyboard/index.js

@@ -16,6 +16,10 @@ export default sfc({
     })
   ],
 
+  model: {
+    event: 'update:value'
+  },
+
   props: {
     show: Boolean,
     title: String,
@@ -26,6 +30,10 @@ export default sfc({
       type: String,
       default: 'default'
     },
+    value: {
+      type: String,
+      default: ''
+    },
     extraKey: {
       type: String,
       default: ''
@@ -103,12 +111,16 @@ export default sfc({
         return;
       }
 
+      const { value } = this;
+
       if (type === 'delete') {
         this.$emit('delete');
+        this.$emit('update:value', value.slice(0, value.length - 1));
       } else if (type === 'close') {
         this.onClose();
       } else {
         this.$emit('input', text);
+        this.$emit('update:value', value + text);
       }
     }
   },

packages/number-keyboard/test/__snapshots__/demo.spec.js.snap

@@ -18,5 +18,16 @@ exports[`renders demo correctly 1`] = `
       <div class="van-number-keyboard__sidebar"><i role="button" tabindex="0" class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big van-key--close">完成</i></div>
     </div>
   </div>
+  <div>
+    <div class="van-cell van-cell--clickable van-field">
+      <div class="van-cell__value van-cell__value--alone">
+        <div class="van-field__body"><input type="text" placeholder="点此输入" readonly="readonly" class="van-field__control"></div>
+      </div>
+    </div>
+    <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
+      <div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
+      <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+    </div>
+  </div>
 </div>
 `;

packages/number-keyboard/test/index.spec.js

@@ -126,3 +126,25 @@ test('focus on key', () => {
   trigger(key, 'touchend');
   expect(wrapper).toMatchSnapshot();
 });
+
+test('controlled mode', () => {
+  const wrapper = mount(NumberKeyboard, {
+    propsData: {
+      value: ''
+    },
+    listeners: {
+      'update:value': value => {
+        wrapper.setProps({ value });
+      }
+    }
+  });
+
+  const keys = wrapper.findAll('.van-key');
+  keys.at(0).trigger('click');
+  keys.at(1).trigger('click');
+
+  expect(wrapper.vm.value).toEqual('12');
+
+  keys.at(11).trigger('click');
+  expect(wrapper.vm.value).toEqual('1');
+});

packages/number-keyboard/zh-CN.md

@@ -60,12 +60,43 @@ export default {
 />
 ```
 
+### 双向绑定
+
+可以通过`v-model`绑定键盘当前输入值
+
+```html
+<van-field
+  readonly
+  clickable
+  :value="value"
+  @touchstart.native.stop="show = true"
+/>
+
+<van-number-keyboard
+  v-model="value"
+  :show="show"
+  @blur="show = false"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show: false,
+      value: ''
+    }
+  }
+}
+```
+
 ## API
 
 ### Props
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
+| v-model | 当前输入值 | `String` | - | 2.0.2 |
 | show | 是否显示键盘 | `Boolean` | - | - |
 | theme | 样式风格，可选值为 `default` `custom` | `String` | `default` | - |
 | title | 键盘标题 | `String` | - | - |
@@ -73,7 +104,7 @@ export default {
 | z-index | 键盘 z-index | `Number` | `100` | - |
 | extra-key | 左下角按键内容 | `String` | `''` | - |
 | close-button-text | 关闭按钮文字，空则不展示 | `String` | `-` | - |
-| delete-button-text | 删除按钮文字 | `String` | `删除` | 1.4.3 |
+| delete-button-text | 删除按钮文字 | `String` | `删除` | - |
 | show-delete-key | 是否展示删除按钮 | `Boolean` | `true` | - |
 | hide-on-click-outside | 点击外部时是否收起键盘 | `Boolean` | `true` | - |
 | safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |