diff --git a/packages/number-keyboard/demo/index.vue b/packages/number-keyboard/demo/index.vue index f28109346..ccf1a1a35 100644 --- a/packages/number-keyboard/demo/index.vue +++ b/packages/number-keyboard/demo/index.vue @@ -38,6 +38,24 @@ @delete="onDelete" /> + + + + + + @@ -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' }; }, diff --git a/packages/number-keyboard/en-US.md b/packages/number-keyboard/en-US.md index 7c9354cf0..fd3fd8262 100644 --- a/packages/number-keyboard/en-US.md +++ b/packages/number-keyboard/en-US.md @@ -59,12 +59,41 @@ export default { /> ``` +### Bind Value + +```html + + + +``` + +```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` | - | diff --git a/packages/number-keyboard/index.js b/packages/number-keyboard/index.js index 179c6e087..a3b2984ff 100644 --- a/packages/number-keyboard/index.js +++ b/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); } } }, diff --git a/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap b/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap index f5b0b4715..5efc919b4 100644 --- a/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap +++ b/packages/number-keyboard/test/__snapshots__/demo.spec.js.snap @@ -18,5 +18,16 @@ exports[`renders demo correctly 1`] = `
删除完成
+
+
+
+
+
+
+ +
`; diff --git a/packages/number-keyboard/test/index.spec.js b/packages/number-keyboard/test/index.spec.js index 6abb4018b..e0401a22e 100644 --- a/packages/number-keyboard/test/index.spec.js +++ b/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'); +}); diff --git a/packages/number-keyboard/zh-CN.md b/packages/number-keyboard/zh-CN.md index 48b2f74ca..3e2714853 100644 --- a/packages/number-keyboard/zh-CN.md +++ b/packages/number-keyboard/zh-CN.md @@ -60,12 +60,43 @@ export default { /> ``` +### 双向绑定 + +可以通过`v-model`绑定键盘当前输入值 + +```html + + + +``` + +```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 |