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 |