<template>
    <div>
        <div class="bigBox">
            <el-steps :active="activeStep" space="10px" finish-status="success" direction="vertical">
                <el-step v-for="(step, index) in steps" :key="index" :title="step.title">
                    {{ step.content }}
                </el-step>
            </el-steps>
            <!-- <el-button @click="nextStep">下一步</el-button> -->
        </div>
    </div>
</template>
  
<script>
import { ref,onMounted } from "vue";
export default {
    setup() {
        let activeStep = ref(0); // 当前激活的步骤
        let steps = ref([       // 步骤的数据
            { title: "done", content: "这是步骤 1 的内容" },
            { title: "步骤 2", content: "这是步骤 2 的内容" },
            { title: "步骤 3", content: "这是步骤 3 的内容" },
            { title: "步骤 4", content: "这是步骤 3 的内容" },
            { title: "步骤 5", content: "这是步骤 3 的内容" },
            { title: "步骤 6", content: "这是步骤 3 的内容" },
            // 添加更多步骤
        ])
        function nextStep() {
            if (activeStep.value < steps.value.length) {
                activeStep.value++;
            }
        };
        onMounted(()=>{
            setInterval(() => {
                nextStep()
            }, 1000);
        })
        return {
            activeStep,
            steps,
            nextStep,
        };
    },
};
</script>
<style>

</style>
  