[new feature] Button: add touchstart event (#3039)

packages/button/en-US.md

@@ -88,4 +88,5 @@ Vue.use(Button);
 
 | Event | Description | Arguments |
 |------|------|------|
-| click | Triggered when click button and not disabled or loading | - |
+| click | Triggered when click button and not disabled or loading | event: Event |
+| touchstart | Triggered when touch start | event: TouchEvent |

packages/button/index.tsx

@@ -46,28 +46,35 @@ function Button(
     }
   };
 
+  const onTouchstart = (event: TouchEvent) => {
+    emit(ctx, 'touchstart', event);
+  };
+
+  const classes = [
+    bem([
+      type,
+      props.size,
+      {
+        loading,
+        disabled,
+        hairline,
+        block: props.block,
+        plain: props.plain,
+        round: props.round,
+        square: props.square,
+        'bottom-action': props.bottomAction
+      }
+    ]),
+    { 'van-hairline--surround': hairline }
+  ];
+
   return (
     <tag
+      class={classes}
       type={props.nativeType}
       disabled={disabled}
-      class={[
-        bem([
-          type,
-          props.size,
-          {
-            loading,
-            disabled,
-            hairline,
-            block: props.block,
-            plain: props.plain,
-            round: props.round,
-            square: props.square,
-            'bottom-action': props.bottomAction
-          }
-        ]),
-        { 'van-hairline--surround': hairline }
-      ]}
       onClick={onClick}
+      onTouchstart={onTouchstart}
       {...inherit(ctx)}
     >
       {loading ? (

packages/button/test/index.spec.js

@@ -58,3 +58,17 @@ test('not trigger click event when loading', () => {
   wrapper.trigger('click');
   expect(onClick).toHaveBeenCalledTimes(0);
 });
+
+test('touchstart event', () => {
+  const onTouchstart = jest.fn();
+  const wrapper = mount(Button, {
+    context: {
+      on: {
+        touchstart: onTouchstart
+      }
+    }
+  });
+
+  wrapper.trigger('touchstart');
+  expect(onTouchstart).toHaveBeenCalled();
+});

packages/button/zh-CN.md

@@ -99,4 +99,5 @@ Vue.use(Button);
 
 | 事件名 | 说明 | 参数 |
 |------|------|------|
-| click | 点击按钮且按钮状态不为加载或禁用时触发 | - |
+| click | 点击按钮，且按钮状态不为加载或禁用时触发 | event: Event |
+| touchstart | 原生 touchstart 事件 | event: TouchEvent |

packages/number-keyboard/demo/index.vue

@@ -1,7 +1,7 @@
 <template>
   <demo-section>
     <demo-block :title="$t('default')">
-      <van-button @touchstart.native.stop="keyboard = 'default'">
+      <van-button @touchstart.stop="keyboard = 'default'">
         {{ $t('button1') }}
       </van-button>
 
@@ -16,7 +16,7 @@
     </demo-block>
 
     <demo-block :title="$t('custom')">
-      <van-button @touchstart.native.stop="keyboard = 'custom'">
+      <van-button @touchstart.stop="keyboard = 'custom'">
         {{ $t('button2') }}
       </van-button>
 

packages/number-keyboard/en-US.md

@@ -12,7 +12,7 @@ Vue.use(NumberKeyboard);
 #### Default Style
 
 ```html
-<van-button @touchstart.native.stop="show = true">
+<van-button @touchstart.stop="show = true">
   Show Keyboard
 </van-button>
 

packages/number-keyboard/zh-CN.md

@@ -12,7 +12,7 @@ Vue.use(NumberKeyboard);
 #### 默认样式
 
 ```html
-<van-button @touchstart.native.stop="show = true">
+<van-button @touchstart.stop="show = true">
   弹出默认键盘
 </van-button>