[improvement] NumberKeyboard: improve click experience (#4116)

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() {
+    onTouchMove(event) {
+      this.touchMove(event);
+
+      if (this.direction) {
         this.active = false;
+      }
     },
 
-    onClick() {
+    onTouchEnd() {
+      if (this.active) {
+        this.active = false;
         this.$emit('press', this.text, this.type);
       }
+    }
   },
 
   render() {
-    const { onBlur } = this;
     return (
       <i
         role="button"
         tabindex="0"
         class={[BORDER, this.className]}
-        onClick={this.onClick}
+        onTouchstart={this.onTouchStart}
-        onTouchstart={this.onFocus}
+        onTouchmove={this.onTouchMove}
-        onTouchmove={onBlur}
+        onTouchend={this.onTouchEnd}
-        onTouchend={onBlur}
+        onTouchcancel={this.onTouchEnd}
-        onTouchcancel={onBlur}
       >
         {this.slots('default') || this.text}
       </i>

src/number-keyboard/test/__snapshots__/index.spec.js.snap

@@ -12,6 +12,24 @@ exports[`focus on key 2`] = `
 </div>
 `;
 
+exports[`move and blur key 1`] = `
+<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; display: none;" name="van-slide-up">
+  <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key van-key--active">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+</div>
+`;
+
+exports[`move and blur key 2`] = `
+<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; display: none;" name="van-slide-up">
+  <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key van-key--active">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+</div>
+`;
+
+exports[`move and blur key 3`] = `
+<div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; display: none;" name="van-slide-up">
+  <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
+</div>
+`;
+
 exports[`render title 1`] = `
 <div class="van-number-keyboard van-number-keyboard--default" style="z-index: 100; display: none;" name="van-slide-up">
   <div class="van-number-keyboard__title van-hairline--top"><span>Title</span><span role="button" tabindex="0" class="van-number-keyboard__close">Close</span></div>

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
+  clickKey(wrapper.findAll('.van-key').at(0));
-    .findAll('.van-key')
-    .at(0)
-    .trigger('click');
   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')
+  clickKey(wrapper.findAll('.van-key').at(11));
-    .at(11)
-    .trigger('click');
   expect(wrapper.emitted('delete')).toBeTruthy();
 });
 
 it('click empty key', () => {
   const wrapper = mount(NumberKeyboard);
-  wrapper
+  clickKey(wrapper.findAll('.van-key').at(9));
-    .findAll('.van-key')
-    .at(9)
-    .trigger('click');
   expect(wrapper.emitted('input')).toBeFalsy();
 });
 
@@ -44,10 +41,7 @@ test('click close button', () => {
     }
   });
 
-  wrapper
+  clickKey(wrapper.findAll('.van-key').at(12));
-    .findAll('.van-key')
-    .at(12)
-    .trigger('click');
   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');
+  clickKey(keys.at(0));
-  keys.at(1).trigger('click');
+  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');
+  clickKey(keys.at(0));
-  keys.at(1).trigger('click');
+  clickKey(keys.at(1));
 
   expect(wrapper.vm.value).toEqual('1');
   expect(onInput).toHaveBeenCalledTimes(1);