feat(Switch): add click event (#4915)

src/switch/README.md

@@ -30,47 +30,31 @@ export default {
 ### Disabled
 
 ```html
-<van-switch
+<van-switch v-model="checked" disabled />
-  v-model="checked"
-  disabled
-/>
 ```
 
 ### Loading
 
 ```html
-<van-switch
+<van-switch v-model="checked" loading />
-  v-model="checked"
-  loading
-/>
 ```
 
 ### Custom Size
 
 ```html
-<van-switch
+<van-switch v-model="checked" size="24px" />
-  v-model="checked"
-  size="24px"
-/>
 ```
 
 ### Custom Color
 
 ```html
-<van-switch
+<van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
-  v-model="checked"
-  active-color="#07c160"
-  inactive-color="#ee0a24"
-/>
 ```
 
 ### Async Control
 
 ```html
-<van-switch
+<van-switch :value="checked" @input="onInput" />
-  :value="checked"
-  @input="onInput"
-/>
 ```
 
 ```js
@@ -111,6 +95,7 @@ export default {
 
 ### Events
 
-| Event | Description | Parameters |
+| Event | Description | Parameters | Version |
-|------|------|------|
+|------|------|------|------|
-| change | Triggered when check status changed | checked: is switch checked |
+| change | Triggered when check status changed | checked: is switch checked | - |
+| click | Triggered when clicked | event: Event | 2.2.11 |

src/switch/README.zh-CN.md

@@ -13,6 +13,8 @@ Vue.use(Switch);
 
 ### 基础用法
 
+通过`v-model`绑定开关的选中状态，`true`表示开，`false`表示关
+
 ```html
 <van-switch v-model="checked" />
 ```
@@ -29,48 +31,42 @@ export default {
 
 ### 禁用状态
 
+通过`disabled`属性来禁用开关，禁用状态下开关不可点击
+
 ```html
-<van-switch
+<van-switch v-model="checked" disabled />
-  v-model="checked"
-  disabled
-/>
 ```
 
 ### 加载状态
 
+通过`loading`属性设置开关为加载状态，加载状态下开关不可点击
+
 ```html
-<van-switch
+<van-switch v-model="checked" loading />
-  v-model="checked"
-  loading
-/>
 ```
 
 ### 自定义大小
 
+通过`size`属性自定义开关的大小
+
 ```html
-<van-switch
+<van-switch v-model="checked" size="24px" />
-  v-model="checked"
-  size="24px"
-/>
 ```
 
 ### 自定义颜色
 
+`active-color`属性表示打开时的背景色，`inactive-color`表示关闭时的背景色
+
 ```html
-<van-switch
+<van-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />
-  v-model="checked"
-  active-color="#07c160"
-  inactive-color="#ee0a24"
-/>
 ```
 
 ### 异步控制
 
+需要异步控制开关时，可以使用`value`属性和`input`事件代替`v-model`，并在`input`事件回调函数中手动处理开关状态
+
 ```html
-<van-switch
+<van-switch :value="checked" @input="onInput" />
-  :value="checked"
-  @input="onInput"
-/>
 ```
 
 ```js
@@ -111,6 +107,7 @@ export default {
 
 ### Events
 
-| 事件名 | 说明 | 回调参数 |
+| 事件名 | 说明 | 回调参数 | 版本 |
-|------|------|------|
+|------|------|------|------|
-| change | 开关状态切换回调 | checked: 是否选中开关 |
+| change | 开关状态切换回调 | checked: 是否选中开关 | - |
+| click | 点击时触发 | event: Event | 2.2.11 |

src/switch/demo/index.vue

@@ -5,39 +5,23 @@
     </demo-block>
 
     <demo-block :title="$t('disabled')">
-      <van-switch
+      <van-switch v-model="checked" disabled />
-        v-model="checked"
-        disabled
-      />
     </demo-block>
 
     <demo-block :title="$t('loadingStatus')">
-      <van-switch
+      <van-switch v-model="checked" loading />
-        v-model="checked"
-        loading
-      />
     </demo-block>
 
     <demo-block :title="$t('customSize')">
-      <van-switch
+      <van-switch v-model="checked2" size="24px" />
-        v-model="checked2"
-        size="24px"
-      />
     </demo-block>
 
     <demo-block :title="$t('customColor')">
-      <van-switch
+      <van-switch v-model="checked3" active-color="#07c160" inactive-color="#ee0a24" />
-        v-model="checked3"
-        active-color="#07c160"
-        inactive-color="#ee0a24"
-      />
     </demo-block>
 
     <demo-block :title="$t('asyncControl')">
-      <van-switch
+      <van-switch :value="checked4" @input="onInput" />
-        :value="checked4"
-        @input="onInput"
-      />
     </demo-block>
   </demo-section>
 </template>
@@ -72,19 +56,21 @@ export default {
 
   methods: {
     onInput(checked) {
-      this.$dialog.confirm({
+      this.$dialog
-        title: this.$t('title'),
+        .confirm({
-        message: this.$t('message')
+          title: this.$t('title'),
-      }).then(() => {
+          message: this.$t('message')
-        this.checked4 = checked;
+        })
-      });
+        .then(() => {
+          this.checked4 = checked;
+        });
     }
   }
 };
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-switch {
   .van-switch {

src/switch/index.tsx

@@ -40,7 +40,9 @@ function Switch(
 
   const loadingColor = checked ? activeColor || BLUE : inactiveColor || GRAY_DARK;
 
-  function onClick() {
+  function onClick(event: PointerEvent) {
+    emit(ctx, 'click', event);
+
     if (!disabled && !loading) {
       const newValue = checked ? inactiveValue : activeValue;
       emit(ctx, 'input', newValue);

src/switch/test/index.spec.js

@@ -82,3 +82,18 @@ test('size prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('click event', () => {
+  const click = jest.fn();
+  const wrapper = mount(Switch, {
+    context: {
+      on: {
+        click
+      }
+    }
+  });
+
+  wrapper.trigger('click');
+
+  expect(click).toHaveBeenCalledTimes(1);
+});