diff --git a/src/step/index.js b/src/step/index.js
index ce84b9e29..0d942c72d 100644
--- a/src/step/index.js
+++ b/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 ;
},
+
+ onClickStep() {
+ this.parent.$emit('click-step', this.index);
+ },
},
render() {
@@ -59,10 +64,16 @@ export default createComponent({
return (
-
+
{this.slots()}
-
{this.genCircle()}
+
+ {this.genCircle()}
+
);
diff --git a/src/steps/README.md b/src/steps/README.md
index 7b4359b63..e126db654 100644
--- a/src/steps/README.md
+++ b/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* |
diff --git a/src/steps/README.zh-CN.md b/src/steps/README.zh-CN.md
index 81a195687..d67c9e00b 100644
--- a/src/steps/README.zh-CN.md
+++ b/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* |
diff --git a/src/steps/test/index.spec.js b/src/steps/test/index.spec.js
index 7e9781642..177eb4d1b 100644
--- a/src/steps/test/index.spec.js
+++ b/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: `
-
-
+
+
Custim Inactive Icon
A
-
-
+
+
Custim Active Icon
B
-
-
+
+
Custim Inactive Icon
C
-
-
+
+
`,
- components: {
- Steps,
- Step,
- },
});
expect(wrapper).toMatchSnapshot();
});
+
+test('click-step event', () => {
+ const onClickStep = jest.fn();
+ const wrapper = mount({
+ template: `
+
+ A
+ B
+ C
+
+ `,
+ 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);
+});