feat(Steps): add click event (#2874)

* feat(Steps): add click event

* feat(Steps): code gap

* feat: click event name adjustment

example/pages/steps/index.js

@@ -1,4 +1,5 @@
 import Page from '../../common/page';
+import Toast from '../../dist/toast/toast';
 
 Page({
   data: {
@@ -27,5 +28,9 @@ Page({
     this.setData({
       active: ++this.data.active % 4
     });
-  }
+  },
+
+  onClick(event) {
+    Toast(`Index: ${event.detail}`);
+  },
 });

example/pages/steps/index.wxml

@@ -26,3 +26,16 @@
     active-color="#ee0a24"
   />
 </demo-block>
+
+<demo-block title="click事件">
+  <van-steps
+    steps="{{ steps }}"
+    bind:click-step="onClick"
+    active="{{ active }}"
+    custom-class="demo-margin-bottom"
+  />
+
+  <van-button custom-class="demo-margin-left" bind:click="nextStep">下一步</van-button>
+</demo-block>
+
+<van-toast id="van-toast" />

packages/steps/README.md

@@ -83,6 +83,12 @@ Page({
 | active-icon | 激活状态底部图标，可选值见 [Icon 组件](#/icon) | *string* | `checked` | - |
 | inactive-icon | 未激活状态底部图标，可选值见 [Icon 组件](#/icon) | *string* | - | - |
 
+### Events
+
+| 事件名称 | 说明 | 回调参数 |
+|------|------|------|
+| bind:click-step | 点击步骤时触发的事件 | event.detail:当前步骤的索引 |
+
 ### 外部样式类
 
 | 类名 | 说明 |

packages/steps/index.ts

@@ -1,3 +1,4 @@
+import { Weapp } from 'definitions/weapp';
 import { VantComponent } from '../common/component';
 import { GREEN, GRAY_DARK } from '../common/color';
 
@@ -25,5 +26,12 @@ VantComponent({
       value: 'checked'
     },
     inactiveIcon: String
-  }
+  },
+
+  methods: {
+    onClick(event: Weapp.Event) {
+      const { index } = event.currentTarget.dataset;
+      this.$emit('click-step', index);
+    }
+  },
 });

packages/steps/index.wxml

@@ -5,6 +5,8 @@
     <view
       wx:for="{{ steps }}"
       wx:key="index"
+      bindtap="onClick"
+      data-index="{{ index }}"
       class="{{ utils.bem('step', [direction, status(index, active)]) }} van-hairline"
       style="{{ status(index, active) === 'inactive' ? 'color: ' + inactiveColor: '' }}"
     >