feat(Steps): add click-step event (#5937)

src/step/index.js

@@ -17,6 +17,7 @@ export default createComponent({
         return 'process';
       }
     },
+
     active() {
       return this.status === 'process';
     },
@@ -48,6 +49,10 @@ export default createComponent({
 
       return <i class={bem('circle')} />;
     },
+
+    onClickStep() {
+      this.parent.$emit('click-step', this.index);
+    },
   },
 
   render() {
@@ -59,10 +64,16 @@ export default createComponent({
 
     return (
       <div class={[BORDER, bem([direction, { [status]: status }])]}>
-        <div class={bem('title', { active })} style={titleStyle}>
+        <div
+          class={bem('title', { active })}
+          style={titleStyle}
+          onClick={this.onClickStep}
+        >
           {this.slots()}
         </div>
-        <div class={bem('circle-container')}>{this.genCircle()}</div>
+        <div class={bem('circle-container')} onClick={this.onClickStep}>
+          {this.genCircle()}
+        </div>
         <div class={bem('line')} style={lineStyle} />
       </div>
     );

src/steps/README.md

@@ -85,3 +85,9 @@ export default {
 |------|------|
 | active-icon | Custom active icon |
 | inactive-icon | Custom inactive icon |
+
+### Steps Events
+
+| Event | Description | Arguments |
+|------|------|------|
+| click-step `v2.6.0` | Triggered when a step's title or icon is clicked | *index: number* |

src/steps/README.zh-CN.md

@@ -91,3 +91,9 @@ export default {
 |------|------|
 | active-icon | 自定义激活状态图标 |
 | inactive-icon | 自定义未激活状态图标 |
+
+### Steps Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| click-step `v2.6.0` | 点击步骤的标题或图标时触发 | *index: number* |

src/steps/test/index.spec.js

@@ -1,29 +1,52 @@
 import { mount } from '../../../test';
-import Steps from '..';
-import Step from '../../step';
 
 test('icon slot', () => {
   const wrapper = mount({
     template: `
-    <steps :active="1">
+    <van-steps :active="1">
-      <step>
+      <van-step>
         <template v-slot:inactive-icon>Custim Inactive Icon</template>
         A
-      </step>
+      </van-step>
-      <step>
+      <van-step>
         <template v-slot:active-icon>Custim Active Icon</template>
         B
-      </step>
+      </van-step>
-      <step>
+      <van-step>
         <template v-slot:inactive-icon>Custim Inactive Icon</template>
         C
-      </step>
+      </van-step>
-    </steps>
+    </van-steps>
     `,
-    components: {
-      Steps,
-      Step,
-    },
   });
   expect(wrapper).toMatchSnapshot();
 });
+
+test('click-step event', () => {
+  const onClickStep = jest.fn();
+  const wrapper = mount({
+    template: `
+      <van-steps :active="1" @click-step="onClickStep">
+        <van-step>A</van-step>
+        <van-step>B</van-step>
+        <van-step>C</van-step>
+      </van-steps>
+    `,
+    methods: {
+      onClickStep,
+    },
+  });
+
+  wrapper.find('.van-step').trigger('click');
+  expect(onClickStep).toHaveBeenCalledTimes(0);
+
+  wrapper.find('.van-step__title').trigger('click');
+  expect(onClickStep).toHaveBeenCalledWith(0);
+
+  wrapper
+    .findAll('.van-step__circle-container')
+    .at(2)
+    .trigger('click');
+  expect(onClickStep).toHaveBeenCalledTimes(2);
+  expect(onClickStep).toHaveBeenLastCalledWith(2);
+});