diff --git a/src/number-keyboard/Key.js b/src/number-keyboard/Key.js
index 588eb1ca2..79c8f5b96 100644
--- a/src/number-keyboard/Key.js
+++ b/src/number-keyboard/Key.js
@@ -1,9 +1,12 @@
import { createNamespace } from '../utils';
+import { TouchMixin } from '../mixins/touch';
import { BORDER } from '../utils/constant';
const [createComponent, bem] = createNamespace('key');
export default createComponent({
+ mixins: [TouchMixin],
+
props: {
type: String,
text: [Number, String],
@@ -36,31 +39,37 @@ export default createComponent({
},
methods: {
- onFocus() {
+ onTouchStart(event) {
+ this.touchStart(event);
this.active = true;
},
- onBlur() {
- this.active = false;
+ onTouchMove(event) {
+ this.touchMove(event);
+
+ if (this.direction) {
+ this.active = false;
+ }
},
- onClick() {
- this.$emit('press', this.text, this.type);
+ onTouchEnd() {
+ if (this.active) {
+ this.active = false;
+ this.$emit('press', this.text, this.type);
+ }
}
},
render() {
- const { onBlur } = this;
return (
{this.slots('default') || this.text}
diff --git a/src/number-keyboard/test/__snapshots__/index.spec.js.snap b/src/number-keyboard/test/__snapshots__/index.spec.js.snap
index d48cb04a8..bbb1b1111 100644
--- a/src/number-keyboard/test/__snapshots__/index.spec.js.snap
+++ b/src/number-keyboard/test/__snapshots__/index.spec.js.snap
@@ -12,6 +12,24 @@ exports[`focus on key 2`] = `
`;
+exports[`move and blur key 1`] = `
+
+`;
+
+exports[`move and blur key 2`] = `
+
+`;
+
+exports[`move and blur key 3`] = `
+
+`;
+
exports[`render title 1`] = `
TitleClose
diff --git a/src/number-keyboard/test/index.spec.js b/src/number-keyboard/test/index.spec.js
index 4b3abda6f..25921bad4 100644
--- a/src/number-keyboard/test/index.spec.js
+++ b/src/number-keyboard/test/index.spec.js
@@ -1,6 +1,11 @@
import NumberKeyboard from '..';
import { mount, trigger } from '../../../test/utils';
+function clickKey(key) {
+ trigger(key, 'touchstart');
+ trigger(key, 'touchend');
+}
+
test('click number key', () => {
const wrapper = mount(NumberKeyboard, {
propsData: {
@@ -9,10 +14,7 @@ test('click number key', () => {
}
});
- wrapper
- .findAll('.van-key')
- .at(0)
- .trigger('click');
+ clickKey(wrapper.findAll('.van-key').at(0));
expect(wrapper.emitted('input')[0][0]).toEqual(1);
wrapper.destroy();
@@ -20,19 +22,14 @@ test('click number key', () => {
it('click delete key', () => {
const wrapper = mount(NumberKeyboard);
- wrapper
- .findAll('.van-key')
- .at(11)
- .trigger('click');
+
+ clickKey(wrapper.findAll('.van-key').at(11));
expect(wrapper.emitted('delete')).toBeTruthy();
});
it('click empty key', () => {
const wrapper = mount(NumberKeyboard);
- wrapper
- .findAll('.van-key')
- .at(9)
- .trigger('click');
+ clickKey(wrapper.findAll('.van-key').at(9));
expect(wrapper.emitted('input')).toBeFalsy();
});
@@ -44,10 +41,7 @@ test('click close button', () => {
}
});
- wrapper
- .findAll('.van-key')
- .at(12)
- .trigger('click');
+ clickKey(wrapper.findAll('.van-key').at(12));
expect(wrapper.emitted('close')).toBeTruthy();
});
@@ -127,6 +121,20 @@ test('focus on key', () => {
expect(wrapper).toMatchSnapshot();
});
+test('move and blur key', () => {
+ const wrapper = mount(NumberKeyboard);
+
+ const key = wrapper.find('.van-key');
+ trigger(key, 'touchstart');
+ expect(wrapper).toMatchSnapshot();
+ trigger(key, 'touchmove', 0, 0);
+ expect(wrapper).toMatchSnapshot();
+ trigger(key, 'touchmove', 100, 0);
+ expect(wrapper).toMatchSnapshot();
+ trigger(key, 'touchend');
+ expect(wrapper.emitted('input')).toBeFalsy();
+});
+
test('bind value', () => {
const wrapper = mount(NumberKeyboard, {
propsData: {
@@ -140,12 +148,12 @@ test('bind value', () => {
});
const keys = wrapper.findAll('.van-key');
- keys.at(0).trigger('click');
- keys.at(1).trigger('click');
+ clickKey(keys.at(0));
+ clickKey(keys.at(1));
expect(wrapper.vm.value).toEqual('12');
- keys.at(11).trigger('click');
+ clickKey(keys.at(11));
expect(wrapper.vm.value).toEqual('1');
});
@@ -165,8 +173,8 @@ test('maxlength', () => {
});
const keys = wrapper.findAll('.van-key');
- keys.at(0).trigger('click');
- keys.at(1).trigger('click');
+ clickKey(keys.at(0));
+ clickKey(keys.at(1));
expect(wrapper.vm.value).toEqual('1');
expect(onInput).toHaveBeenCalledTimes(1);