From 5a44d204bdd60681785686621c81b346d5e162b2 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Fri, 22 Mar 2019 14:41:01 +0800
Subject: [PATCH] [new feature] Button: add touchstart event (#3039)

---
 packages/button/en-US.md                |  3 +-
 packages/button/index.tsx               | 41 +++++++++++++++----------
 packages/button/test/index.spec.js      | 14 +++++++++
 packages/button/zh-CN.md                |  3 +-
 packages/number-keyboard/demo/index.vue |  4 +--
 packages/number-keyboard/en-US.md       |  2 +-
 packages/number-keyboard/zh-CN.md       |  2 +-
 7 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/packages/button/en-US.md b/packages/button/en-US.md
index ccf6a36a7..30611ec06 100644
--- a/packages/button/en-US.md
+++ b/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 |
diff --git a/packages/button/index.tsx b/packages/button/index.tsx
index cfe1f4b24..68128e6a2 100644
--- a/packages/button/index.tsx
+++ b/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 ? (
diff --git a/packages/button/test/index.spec.js b/packages/button/test/index.spec.js
index 7a03f4604..143e46473 100644
--- a/packages/button/test/index.spec.js
+++ b/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();
+});
diff --git a/packages/button/zh-CN.md b/packages/button/zh-CN.md
index 3a621ce5a..3d70c7d70 100644
--- a/packages/button/zh-CN.md
+++ b/packages/button/zh-CN.md
@@ -99,4 +99,5 @@ Vue.use(Button);
 
 | 事件名 | 说明 | 参数 |
 |------|------|------|
-| click | 点击按钮且按钮状态不为加载或禁用时触发 | - |
+| click | 点击按钮，且按钮状态不为加载或禁用时触发 | event: Event |
+| touchstart | 原生 touchstart 事件 | event: TouchEvent |
diff --git a/packages/number-keyboard/demo/index.vue b/packages/number-keyboard/demo/index.vue
index 50be0aa3d..421763d43 100644
--- a/packages/number-keyboard/demo/index.vue
+++ b/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>
 
diff --git a/packages/number-keyboard/en-US.md b/packages/number-keyboard/en-US.md
index d35338459..fcb0807b0 100644
--- a/packages/number-keyboard/en-US.md
+++ b/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>
 
diff --git a/packages/number-keyboard/zh-CN.md b/packages/number-keyboard/zh-CN.md
index b98e25116..e5371c56d 100644
--- a/packages/number-keyboard/zh-CN.md
+++ b/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>