'lct'

Your Name

2022-06-27 0a3027eccd3b0bb6542e5fc831f7e02740dcfc95

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<template>
    <div class="steps-container">
        <el-card shadow="hover" header="element-plus 步骤条">
            <el-steps :active="stepsActive">
                <el-step title="第一步">
                    <template #icon>
                        <SvgIcon name="iconfont icon-0_round_solid" :size="20" />
                    </template>
                </el-step>
                <el-step title="第二步">
                    <template #icon>
                        <SvgIcon name="iconfont icon-2_round_solid" :size="20" />
                    </template>
                </el-step>
                <el-step title="第三步">
                    <template #icon>
                        <SvgIcon name="iconfont icon-3_round_solid" :size="20" />
                    </template>
                </el-step>
            </el-steps>
            <el-result icon="success" title="成功提示" subTitle="请根据提示进行操作" v-if="stepsActive === 1"> </el-result>
            <el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作" v-else-if="stepsActive === 2"> </el-result>
            <el-result icon="error" title="错误提示" subTitle="请根据提示进行操作" v-else-if="stepsActive === 3"> </el-result>
            <el-button @click="onNextSteps" size="default" class="mt15" type="primary">
                <SvgIcon name="iconfont icon-step" />
                下一步
            </el-button>
        </el-card>
    </div>
</template>
 
<script lang="ts">
import { toRefs, reactive, defineComponent } from 'vue';
 
export default defineComponent({
    name: 'pagesSteps',
    setup() {
        const state = reactive({
            stepsActive: 1,
        });
        // 下一步点击
        const onNextSteps = () => {
            if (state.stepsActive++ > 2) state.stepsActive = 1;
        };
        return {
            onNextSteps,
            ...toRefs(state),
        };
    },
});
</script>