抽象的步骤条(复制即用)

html 复制代码
<template>
  <div class="main">
    <div class="steps">
      <ol>
        <li
            v-for="(step, index) in steps"
            :key="index"
            :class="{ active: currentIndex === index, done: currentIndex > index }"
        >
          {{ step }}
        </li>
      </ol>
    </div>
    <div class="step-content">
      <div v-if="currentIndex === 0">
        <h3>账号验证</h3>
        <p>请填写您的账号。</p>
        <input/>
        <button @click="nextStep" :disabled="currentIndex === steps.length - 1">下一步</button>
      </div>
      <div v-else-if="currentIndex === 1">
        <h3>身份校验</h3>
        <p>请输入您的身份信息进行校验。</p>
        <input/>
        <button @click="nextStep" :disabled="currentIndex === steps.length - 1">下一步</button>
      </div>
      <div v-else-if="currentIndex === 2">
        <h3>验证码校验</h3>
        <p>请输入您收到的验证码进行校验。</p>
        <input/>
        <button @click="nextStep" :disabled="currentIndex === steps.length - 1">下一步</button>
      </div>
      <div v-else-if="currentIndex === 3">
        <h3>密码重置</h3>
        <p>请输入您的新密码进行重置。</p>
        <input/>
        <button @click="nextStep" :disabled="currentIndex === steps.length - 1">修改密码</button>
      </div>
    </div>
    <div class="step-button">
    <button @click="prevStep" :disabled="currentIndex === 0">上一步</button>
    </div>
  </div>
</template>

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

const steps = ['找回账号', '身份校验', '验证码校验', '密码重置'];
const currentIndex = ref(0); // 当前活动步骤的索引

const nextStep = () => {
  if (currentIndex.value < steps.length - 1) {
    currentIndex.value++;
  }
};

const prevStep = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--;
  }
};
</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
}
/**/
.main{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-content{
  margin-top: 10vh; /* 与步骤条的垂直距离 */
  text-align: center; /* 水平居中文本 */
}
.step-content p,
.step-content h1,
.step-content input{
  margin-top: 3vh;
}

.step-button{
  margin-top: 2vh;
}

/* step步骤条核心样式 */
.steps ol {
  --normal-color: #fff;  /* css变量,默认颜色  */
  --active-color: #428aea;  /* css变量,激活颜色  */

  display: flex;
  width: 70vw;
  margin-top: 15%; /* 调整步骤条垂直位置 */
  justify-content: space-between;
  counter-reset: order;  /* 定义CSS计数器 */
}

  /* 步骤项 */
.steps ol > li {
  flex: auto;
  display: inline-flex;
  align-items: center;
  counter-increment: order;
  color: var(--active-color);
}

/* 去掉右边多余 */
.steps ol > li:last-child {flex: none;}

  /* 步骤编号(带圈数字) */
.steps ol> li::before {
  content: counter(order);
  flex-shrink: 0;
  width: 1.4em;
  line-height: 1.4em;
  margin-right: .5em;
  text-align: center;
  border-radius: 50%;
  border: 1px solid;
}

  /* 步骤项引导线 */
.steps ol> li:not(:last-child)::after {
  content: '';
  flex: 1;
  margin: 0 1em;
  border-bottom: 1px solid;
  opacity: .6;
}
  /* 步骤状态 */
.steps ol> .active {color: var(--active-color);}
.steps ol> .active::before {
  color: #fff;
  background: var(--active-color);
  border-color: var(--active-color);
}
.steps ol> .active::after,
.steps ol> .active ~ li {color: var(--normal-color);}
</style>

基于vue3的抽象组件

相关推荐
vivo互联网技术4 分钟前
EMNLP 2025|vivo 等提出 DiMo-GUI:模态分治+动态聚焦,GUI 智能体推理时扩展的新范式
前端·人工智能·agent
本末倒置18320 分钟前
Svelte邪修的JSDoc,到底是个啥?
前端·javascript·面试
李明卫杭州26 分钟前
CSS中的background-clip详解
前端·javascript
林太白32 分钟前
Vite+React+ts项目搭建(十分钟搭建个最新版React19项目吧)
前端·后端·react.js
Mr. Cao code33 分钟前
Nginx与Apache:Web服务器性能大比拼
运维·服务器·前端·nginx·apache
荻酷社区40 分钟前
HTML+CSS+JavaScript实现的AES加密工具网页应用,包含完整的UI界面和加密/解密功能
javascript·css·html
中微子1 小时前
用 ECharts + React 打造环形饼图:从 0 到 1 入门
前端
彭于晏爱编程1 小时前
密码的,YOU不能不知道的Next.jsSSR(服务端渲染)
前端·javascript·react.js
再学一点就睡1 小时前
手撕前端常用 7 种设计模式:从原理到实战,附完整代码案例
前端·设计模式
龙在天1 小时前
vue3如何封装统一的弹窗
前端