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 | 键盘完全收起时触发 | - |