vue实现的步骤条组件——2种方法

最新推荐文章于 2025-04-17 17:28:13 发布

小佳的笔记

最新推荐文章于 2025-04-17 17:28:13 发布

阅读量4.1k

点赞数 4

文章标签： css html javascript vue elementui

本文链接：https://blog.youkuaiyun.com/qq_45234274/article/details/120670141

版权

这篇博客详细介绍了如何使用Vue来实现步骤条组件，包括根据计算长度控制样式变化的方法和模仿Element UI框架的步骤条写法，涉及到CSS、HTML、JavaScript和Vue.js的相关技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

语言：vue
一、根据计算长度控制样式变化

样式如下：

2.代码:根据长度百分比计算样式

<template>
  <!-- 步骤条盒子 -->
  <div class="steps-box">
    <!-- 步骤条 -->
    <div
      class="Article-steps"
      :class="data.stepList.length <= activeIndex ? 'step-over' : ''"
    >
      <!-- 步骤条背景进度条 -->
      <div class="line">
        <span
          class="plan"
          :style="`width:${
     
            (activeIndex - 1) * (100 / (data.stepList.length - 1))
          }%`"
        ></span>
      </div>
      <!-- 每步部分 -->
      <span
        class="step"
        v-for="(i, index) in data.stepList"
        :key="index"
        :class="
          activeIndex == i.stepIndex || i.stepIndex <= activeIndex
            ? 'step-active'
            : 'step-start'
        "
      >
        <span
          class="step-num"
          :class="{ active: activeIndex + 1 === i.stepIndex }"
        >
          <span
            class="num"
            :class="{ active: activeIndex + 1 === i.stepIndex }"
            >{
   {
    i.stepIndex }}</span
          >
        </span>
        <p class="title" :class="{ active: activeIndex + 1 === i.stepIndex }">
          {
   {
    i.title }}
        </p>
      </span>
    </div>
  </div>
</template>
<script>
import {
    reactive, ref } from "vue";

export default {
   
  setup() {
   
    const activeIndex = ref(3);
    const data = reactive({
   
      //步骤条步数
      stepList: [

最低0.47元/天解锁文章