Merge pull request #927 from WeBankFinTech/feat-step-click

feat(Step): 增加 clickStep 事件

Author: zym19960704

components/steps/step.tsx

@@ -40,7 +40,8 @@ export default defineComponent({
         CheckOutlined,
     },
     props: stepProps,
-    setup(props, { slots }) {
+    emits: ['clickStep'],
+    setup(props, { slots, emit }) {
         const vm = getCurrentInstance();
         if (
             !vm
@@ -108,6 +109,9 @@ export default defineComponent({
         const classList = computed(() =>
             [prefixCls, `is-${status.value}`].filter(Boolean).join(' '),
         );
+        const onClickStep = () => {
+            emit('clickStep', index.value);
+        };
         const renderSymbol = () => {
             let content;
             if (slots.icon) {
@@ -134,7 +138,7 @@ export default defineComponent({
             }
             return (
                 <div class={`${prefixCls}-symbol`}>
-                    <div class={`${prefixCls}-symbol-wrapper`}>{content}</div>
+                    <div class={`${prefixCls}-symbol-wrapper`} onClick={onClickStep}>{content}</div>
                     {parent.props.vertical && (
                         <div class={`${prefixCls}-tail`}></div>
                     )}
@@ -155,7 +159,9 @@ export default defineComponent({
                 {renderSymbol()}
                 <div class={`${prefixCls}-content`}>
                     <div class={`${prefixCls}-title`}>
-                        {slots.title?.() || `${props.title}`}
+                        <span class={`${prefixCls}-text`} onClick={onClickStep}>
+                            {slots.title?.() || `${props.title}`}
+                        </span>
                         {!parent.props.vertical && (
                             <div class={`${prefixCls}-tail`}></div>
                         )}

docs/.vitepress/components/steps/common.vue

@@ -1,18 +1,20 @@
 <template>
     <FSteps :current="current">
-        <FStep title="待开始" description="All through the day, I me mine" />
+        <FStep title="待开始" description="All through the day, I me mine" @clickStep="handleClickStep" />
         <FStep
             title="进行中"
             description="When I find myself in times of trouble Mother Mary comes to me"
+            @clickStep="handleClickStep"
         />
-        <FStep title="待处理">
+        <FStep title="待处理" @clickStep="handleClickStep">
             <template #icon>
                 <ProductOutlined />
             </template>
         </FStep>
         <FStep
             title="已完成"
             description="Something in the way she moves Attracts me like no other lover"
+            @clickStep="handleClickStep"
         />
     </FSteps>
 
@@ -41,10 +43,15 @@ export default {
             current.value = current.value + 1;
         };
 
+        const handleClickStep = (step) => {
+            console.log('[steps.common] handleClickStep, step:', step);
+        };
+
         return {
             current,
             pre,
             next,
+            handleClickStep,
         };
     },
 };

docs/.vitepress/components/steps/index.md

@@ -14,21 +14,27 @@ app.use(FSteps);
 
 ### 基础用法
 
---COMMON
+:::demo
+common.vue
+:::
 
 ### 垂直方向
 
---VERTICAL
+:::demo
+vertical.vue
+:::
 
 ### 图标
 
---ICON
+:::demo
+icon.vue
+:::
 
 ### 错误状态
 
---ERROR
-
---CODE
+:::demo
+error.vue
+:::
 
 ## Steps Props
 
@@ -54,3 +60,9 @@ app.use(FSteps);
 | icon        | 步骤图标的类型，可选                                                                                           | slot          | -      |
 | status      | 指定状态。当不配置该属性时，会使用 `Steps` 的 `status` 来自动指定状态。可选：`wait` `process` `finish` `error` | string        | -      |
 | title       | 标题                                                                                                           | string / slot | -      |
+
+## Step Events
+
+| 事件名称  | 说明           | 回调参数             |
+| --------- | -------------- | -------------------- |
+| clickStep | 点击步骤时触发 | (step: number)=>void |