diff --git a/packages/number-keyboard/en-US.md b/packages/number-keyboard/en-US.md
index 3647f830e..86329e9fa 100644
--- a/packages/number-keyboard/en-US.md
+++ b/packages/number-keyboard/en-US.md
@@ -79,6 +79,7 @@ export default {
|-----------|-----------|-----------|
| input | Triggered when keydown | key: Content of the key |
| delete | Triggered when press delete key | - |
-| blur | Triggered when blur keyboard | - |
+| blur | Triggered when click close button | - |
+| blur | Triggered when click close button or blur keyboard | - |
| show | Triggered when keyboard is fully displayed. | - |
| hide | Triggered when keyboard is fully hidden. | - |
diff --git a/packages/number-keyboard/index.vue b/packages/number-keyboard/index.vue
index 13e5eef12..5a7ff392c 100644
--- a/packages/number-keyboard/index.vue
+++ b/packages/number-keyboard/index.vue
@@ -4,6 +4,7 @@
v-show="show"
:style="style"
:class="b([theme])"
+ @touchstart.stop
@animationend="onAnimationEnd"
@webkitAnimationEnd="onAnimationEnd"
>
@@ -13,7 +14,7 @@
:class="b('close')"
v-if="showTitleClose"
v-text="closeButtonText"
- @click="onBlur"
+ @click="onClose"
/>
@@ -145,6 +146,11 @@ export default create({
this.$emit('blur');
},
+ onClose() {
+ this.$emit('close');
+ this.onBlur();
+ },
+
onAnimationEnd() {
this.$emit(this.show ? 'show' : 'hide');
},
@@ -157,7 +163,7 @@ export default create({
if (text === 'delete') {
this.$emit('delete');
} else if (text === this.closeButtonText) {
- this.onBlur();
+ this.onClose();
} else {
this.$emit('input', text);
}
diff --git a/packages/number-keyboard/test/index.spec.js b/packages/number-keyboard/test/index.spec.js
new file mode 100644
index 000000000..485517f9f
--- /dev/null
+++ b/packages/number-keyboard/test/index.spec.js
@@ -0,0 +1,85 @@
+import NumberKeyboard from '../';
+import { mount } from '@vue/test-utils';
+
+function mockTouch(wrapper, event, keyIndex) {
+ const key = wrapper.element.querySelectorAll('.van-key')[keyIndex];
+ const touchStart = document.createEvent('CustomEvent');
+ touchStart.initCustomEvent(event, true, true, {});
+ key.dispatchEvent(touchStart);
+}
+
+test('click number key', () => {
+ const wrapper = mount(NumberKeyboard, {
+ propsData: {
+ theme: 'custom',
+ closeButtonText: 'close'
+ }
+ });
+
+ mockTouch(wrapper, 'touchstart', 10);
+ mockTouch(wrapper, 'touchstart', 0);
+ mockTouch(wrapper, 'touchend', 0);
+ wrapper.vm.$destroy();
+ expect(wrapper.emitted('input')[0][0]).toEqual(1);
+});
+
+it('click delete key', () => {
+ const wrapper = mount(NumberKeyboard);
+ mockTouch(wrapper, 'touchstart', 11);
+ expect(wrapper.emitted('delete')).toBeTruthy();
+});
+
+test('click close button', () => {
+ const wrapper = mount(NumberKeyboard, {
+ propsData: {
+ theme: 'custom',
+ closeButtonText: 'close'
+ }
+ });
+
+ mockTouch(wrapper, 'touchstart', 12);
+ expect(wrapper.emitted('close')).toBeTruthy();
+});
+
+test('keey-alive live cycle', () => {
+ const wrapper = mount({
+ template: `
+
+
+
+ `,
+ props: ['show'],
+ components: { NumberKeyboard }
+ }, {
+ attachToDocument: true,
+ propsData: {
+ show: true
+ }
+ });
+
+ expect(wrapper.vm.$el).toBeTruthy();
+ wrapper.vm.show = false;
+ expect(wrapper.vm.el).toBeFalsy();
+});
+
+test('listen to show/hide event when has transtion', () => {
+ const wrapper = mount(NumberKeyboard);
+ wrapper.vm.show = true;
+ wrapper.trigger('animationend');
+ wrapper.vm.show = false;
+ wrapper.trigger('animationend');
+ expect(wrapper.emitted('show')).toBeTruthy();
+ expect(wrapper.emitted('hide')).toBeTruthy();
+});
+
+test('listen to show event when no transtion', () => {
+ const wrapper = mount(NumberKeyboard, {
+ propsData: {
+ transition: false
+ }
+ });
+ wrapper.vm.show = true;
+ wrapper.vm.show = false;
+ expect(wrapper.emitted('show')).toBeTruthy();
+ expect(wrapper.emitted('hide')).toBeTruthy();
+});
diff --git a/packages/number-keyboard/zh-CN.md b/packages/number-keyboard/zh-CN.md
index a082ee260..4c30f24f5 100644
--- a/packages/number-keyboard/zh-CN.md
+++ b/packages/number-keyboard/zh-CN.md
@@ -79,6 +79,7 @@ export default {
|-----------|-----------|-----------|
| input | 点击按键时触发 | key: 按键内容 |
| delete | 点击删除键时触发 | - |
-| blur | 点击非键盘区域时触发 | - |
+| close | 点击关闭按钮时触发 | - |
+| blur | 点击关闭按钮或非键盘区域时触发 | - |
| show | 键盘完全弹出时触发 | - |
| hide | 键盘完全收起时触发 | - |