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: ` - - + + A - - + + B - - + + 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); +});