vue3+element-plus el-steps步骤、防抖按钮、倒计时组件二次封装（vue3项目）

<template>
  <div class="steps-container">
    <el-steps :space="200" :active="activeStep" finish-status="success">
      <el-step v-for="item in steps" :key="item.title" :title="item.title"></el-step>
    </el-steps>
    <div class="steps-action">
      <el-button v-if="canGoBack" @click="goBack">上一步</el-button>
      <el-button type="primary" @click="nextStep" :loading="isLoading">{{ countdown }}秒后提交</el-button>
    </div>
  </div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
 
const steps = [
  { title: '步骤一' },
  { title: '步骤二' },
  { title: '步骤三' }
];
 
const activeStep = ref(0);
const isLoading = ref(false);
const countdown = ref(5);
 
const goBack = () => {
  activeStep.value--;
};
 
const nextStep = () => {
  if (activeStep.value === steps.length - 1) {
    isLoading.value = true;
    startCountdown();
  } else {
    activeStep.value++;
  }
};
 
const startCountdown = () => {
  const timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(timer);
      isLoading.value = false;
    }
  }, 1000);
  onUnmounted(() => clearInterval(timer));
};
 
onMounted(startCountdown);
 
const canGoBack = computed(() => activeStep.value > 0);
</script>
 
<style scoped>
.steps-container {
  margin-top: 20px;
}
.steps-action {
  margin-top: 20px;
  text-align: center;
}
</style>

这个代码实例展示了如何使用Vue 3和Element Plus创建一个带有步进条（el-steps）的组件，其中包含一个带有防抖功能的提交按钮和倒计时逻辑。该实例简洁明了，并包含了必要的注释。