From bf0b96c469df3794612b1e7c80203859219c4d69 Mon Sep 17 00:00:00 2001
From: Lindy <33708359+Lindysen@users.noreply.github.com>
Date: Tue, 17 Mar 2020 19:46:21 +0800
Subject: [PATCH] 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   |  7 ++++++-
 example/pages/steps/index.wxml | 13 +++++++++++++
 packages/steps/README.md       |  6 ++++++
 packages/steps/index.ts        | 10 +++++++++-
 packages/steps/index.wxml      |  2 ++
 5 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/example/pages/steps/index.js b/example/pages/steps/index.js
index 024d3a31..44f710e7 100644
--- a/example/pages/steps/index.js
+++ b/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}`);
+  },
 });
diff --git a/example/pages/steps/index.wxml b/example/pages/steps/index.wxml
index c8bc8b6a..c351b839 100644
--- a/example/pages/steps/index.wxml
+++ b/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" />
diff --git a/packages/steps/README.md b/packages/steps/README.md
index 4e8dd680..b700e7fc 100644
--- a/packages/steps/README.md
+++ b/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:当前步骤的索引 |
+
 ### 外部样式类
 
 | 类名 | 说明 |
diff --git a/packages/steps/index.ts b/packages/steps/index.ts
index de649e47..15da14cf 100644
--- a/packages/steps/index.ts
+++ b/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);
+    }
+  },
 });
diff --git a/packages/steps/index.wxml b/packages/steps/index.wxml
index 866c5272..af31094f 100644
--- a/packages/steps/index.wxml
+++ b/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: '' }}"
     >