Fes Design

Steps 步骤条 ​

拆分某项流程的步骤，引导用户按流程完成任务。

组件注册 ​

js
import { FSteps } from '@fesjs/fes-design';

app.use(FSteps);

代码演示 ​

基础用法 ​

play
<template>
    <FSteps :current="current">
        <FStep title="待开始" description="All through the day, I me mine" />
        <FStep
            title="进行中"
            description="When I find myself in times of trouble Mother Mary comes to me"
        />
        <FStep title="待处理">
            <template #icon>
                <ProductOutlined />
            </template>
        </FStep>
        <FStep
            title="已完成"
            description="Something in the way she moves Attracts me like no other lover"
        />
    </FSteps>

    <FSpace>
        <FButton @click="pre">上一步</FButton>
        <FButton @click="next">下一步</FButton>
    </FSpace>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const current = ref(2);
        const pre = () => {
            if (current.value < 1) {
                return;
            }
            current.value = current.value - 1;
        };
        const next = () => {
            if (current.value > 4) {
                return;
            }
            current.value = current.value + 1;
        };

        return {
            current,
            pre,
            next,
        };
    },
};
</script>

垂直方向 ​

play
<template>
    <FSteps vertical :current="2">
        <FStep title="已完成" />
        <FStep
            title="进行中"
            description="When I find myself in times of trouble Mother Mary comes to me"
        />
        <FStep
            title="待处理"
            description="Here come old flat top He come grooving up slowly"
        />
        <FStep
            title="待处理"
            description="Something in the way she moves Attracts me like no other lover"
        />
    </FSteps>
</template>

图标 ​

play
<template>
    <FSteps :current="2">
        <FStep
            title="已完成"
            description="All through the day, I me mine I me mine, I me mine"
        >
            <template #icon>
                <StarOutlined />
            </template>
        </FStep>
        <FStep
            title="进行中"
            description="When I find myself in times of trouble Mother Mary comes to me"
        >
            <template #icon>
                <StarOutlined />
            </template>
        </FStep>
        <FStep
            title="待处理"
            description="Here come old flat top He come grooving up slowly"
        >
            <template #icon>
                <StarOutlined />
            </template>
        </FStep>
        <FStep
            title="待处理"
            description="Something in the way she moves Attracts me like no other lover"
        >
            <template #icon>
                <StarOutlined />
            </template>
        </FStep>
    </FSteps>
</template>

错误状态 ​

play
<template>
    <FSteps :current="2" status="error">
        <FStep
            title="已完成"
            description="All through the day, I me mine I me mine, I me mine"
        />
        <FStep
            title="进行中"
            description="When I find myself in times of trouble Mother Mary comes to me"
        />
        <FStep
            title="待处理"
            description="Here come old flat top He come grooving up slowly"
        />
        <FStep
            title="待处理"
            description="Something in the way she moves Attracts me like no other lover"
        />
    </FSteps>
</template>

Steps Props ​

属性说明类型默认值
current(v-model)指定当前步骤numberundefined
status指定当前步骤的状态，可选 wait、process、finish、errorstringprocess
type步骤条类型，有 default 和 navigation 两种, 第一期就支持defaultstringdefault
vertical是否垂直方向booleanfalse
initial起始序号number1

Steps Events ​

事件名称说明回调参数
change点击切换步骤时触发(current)=>void

Step Props ​

属性说明类型默认值
description步骤的详情描述，可选string / slot-
icon步骤图标的类型，可选slot-
status指定状态。当不配置该属性时，会使用 Steps 的 status 来自动指定状态。可选：wait process finish errorstring-
title标题string / slot-