Vue3手写steps步骤条

已于 2024-01-23 16:39:10 修改
阅读量879 收藏 7
点赞数 9
文章标签： javascript 前端 vue.js
于 2024-01-23 16:38:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Quzq11/article/details/135775504
版权

实现效果

直接上代码

<template>
  <div class="m-steps-area">
    <div class="m-steps">
      <div
        :class="[
          'm-steps-item',
          {
            finished: current > n,
            process: current === n && n !== totalSteps,
            'last-process': current === totalSteps && n === totalSteps,
            'middle-wait': current < n && n !== totalSteps,
            'last-wait': current < n && n === totalSteps,
          },
        ]"
        v-for="n in totalSteps"
        :key="n"
        @click="onChange(n)"
      >
        <div class="m-steps-icon">
          <span class="u-icon">{{ n }}</span>
        </div>
        <div class="m-steps-content">
          <div class="u-steps-title">{{ stepsLabel[n - 1] || 'Title' + n }}</div>
        </div>
      </div>
    </div>
    <el-button @click="onChange('back')">上一步</el-button>
    <el-button @click="onChange('next')">下一步</el-button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
  stepsLabel: {
    // 步骤title数组
    type: Array,
    default: () => {
      return []
    },
  },
  stepsDesc: {
    // 步骤description数组
    type: Array,
    default: () => {
      return []
    },
  },
  totalSteps: {
    // 总的步骤数
    type: Number,
    default: 5,
  },
  currentStep: {
    // 当前选中的步骤
    type: Number,
    default: 1,
  },
})
let current = ref(1)

const onChange = (n) => {
  console.log('[ n ] >', n)
  // 点击切换选择步骤 back 上一步 next 下一步
  if (n == 'next' && current.value < props.totalSteps) {
    current.value++
  } else if (n == 'back' && current.value > 1) {
    current.value--
  } else if (n != 'next' && n != 'back') {
    current.value = n
  }
}
</script>
<style lang="scss" scoped>
.m-steps-area {
  width: 900px;
  margin: 0px auto;
  margin-top: 150px;
  .m-steps {
    padding: 30px 0;
    display: flex;
    .m-steps-item {
      display: inline-block;
      flex: 1; // 弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
      text-align: left;
      // overflow: hidden;
      font-size: 16px;
      line-height: 32px;
      display: flex;
      flex-direction: column;
      .m-steps-icon {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        text-align: center;
        position: relative;
      }
      .m-steps-content {
        display: inline-block;
        vertical-align: top;
        .u-steps-title {
          display: inline-block;
        }
      }
    }
    .finished:not(:first-of-type) {
      cursor: pointer;
      .m-steps-icon {
        border: 2px solid rgb(51, 113, 255);
        .u-icon {
          color: rgb(51, 113, 255);
        }
        &::after {
          content: '';
          position: absolute;
          top: 15px;
          left: 31px;
          width: 75px;
          height: 2px;
          background: rgb(51, 113, 255);
          z-index: 2;
        }
        &::before {
          content: '';
          position: absolute;
          top: 15px;
          right: 31px;
          width: 75px;
          height: 2px;
          background: rgb(51, 113, 255);
          z-index: 2;
        }
      }
      .m-steps-content {
        color: rgba(102, 102, 102, 0.65);
        .u-steps-title {
          color: rgba(102, 102, 102, 0.85);
        }
        .u-steps-description {
          color: rgba(102, 102, 102, 0.65);
        }
      }
    }
    .finished:first-of-type {
      cursor: pointer;
      .m-steps-icon {
        border: 2px solid rgb(51, 113, 255);
        .u-icon {
          color: rgb(51, 113, 255);
        }
        &::after {
          content: '';
          position: absolute;
          top: 15px;
          left: 31px;
          width: 75px;
          height: 2px;
          background: rgb(51, 113, 255);
          z-index: 2;
        }
      }
      .m-steps-content {
        color: rgba(102, 102, 102, 0.65);
        .u-steps-title {
          color: rgba(102, 102, 102, 0.85);
        }
        .u-steps-description {
          color: rgba(102, 102, 102, 0.65);
        }
      }
    }
    .process:not(:first-of-type) {
      cursor: pointer;
      .m-steps-icon {
        background: rgb(51, 113, 255);
        border: 2px solid rgb(51, 113, 255);
        .u-icon {
          color: #fff;
        }
        &::after {
          content: '';
          position: absolute;
          top: 15px;
          left: 31px;
          width: 75px;
          height: 2px;
          background: rgb(51, 113, 255);
          z-index: 2;
        }
        &::before {
          content: '';
          position: absolute;
          top: 15px;
          right: 31px;
          width: 75px;
          height: 2px;
          background: rgb(51, 113, 255);
          z-index: 2;
        }
      }
      .m-steps-content {
        color: rgba(102, 102, 102, 0.65);
        .u-steps-title {
          color: rgba(102, 102, 102, 0.85);
        }
        .u-steps-description {
          color: rgba(102, 102, 102, 0.65);
        }
      }
    }
    .process:first-of-type {
      cursor: pointer;
      .m-steps-icon {
        background: rgb(51, 113, 255);
        border: 2px solid rgb(51, 113, 255);
        .u-icon {
          color: #fff;
        }
        &::after {
          content: '';
          position: absolute;
          top: 15px;
          left: 31px;
          width: 75px;
          height: 2px;
          background: rgb(51, 113, 255);
          z-index: 2;
        }
      }
      .m-steps-content {
        color: rgba(102, 102, 102, 0.65);
        .u-steps-title {
          color: rgba(102, 102, 102, 0.85);
        }
        .u-steps-description {
          color: rgba(102, 102, 102, 0.65);
        }
      }
    }
    .middle-wait {
      cursor: pointer;
      .m-steps-icon {
        border: 2px solid rgb(228, 228, 228);
        .u-icon {
          color: rgb(204, 204, 204);
        }
        &::after {
          content: '';
          position: absolute;
          top: 15px;
          left: 31px;
          width: 75px;
          height: 2px;
          background: rgb(228, 228, 228);
        }
        &::before {
          content: '';
          position: absolute;
          top: 15px;
          right: 31px;
          width: 75px;
          height: 2px;
          background: rgb(228, 228, 228);
        }
      }
      .m-steps-content {
        color: rgba(153, 153, 153, 0.65);
        .u-steps-title {
          color: rgba(153, 153, 153, 0.85);
        }
        .u-steps-description {
          color: rgba(153, 153, 153, 0.65);
        }
      }
    }
    .last-wait {
      cursor: pointer;
      .m-steps-icon {
        border: 2px solid rgb(228, 228, 228);
        .u-icon {
          color: rgb(204, 204, 204);
        }
        &::before {
          content: '';
          position: absolute;
          top: 15px;
          right: 31px;
          width: 75px;
          height: 2px;
          background: rgb(228, 228, 228);
        }
      }
      .m-steps-content {
        color: rgba(153, 153, 153, 0.65);
        .u-steps-title {
          color: rgba(153, 153, 153, 0.85);
        }
        .u-steps-description {
          color: rgba(153, 153, 153, 0.65);
        }
      }
    }
    .last-process {
      cursor: pointer;
      .m-steps-icon {
        background: rgb(51, 113, 255);
        border: 2px solid rgb(51, 113, 255);
        .u-icon {
          color: #fff;
        }
        &::before {
          content: '';
          position: absolute;
          top: 15px;
          right: 31px;
          width: 75px;
          height: 2px;
          background: rgb(51, 113, 255);
        }
      }
      .m-steps-content {
        color: rgba(102, 102, 102, 0.65);
        .u-steps-title {
          color: rgba(102, 102, 102, 0.85);
        }
        .u-steps-description {
          color: rgba(102, 102, 102, 0.65);
        }
      }
    }
  }
}
</style>

Quzq11
关注
vue手写实现水平步骤条
qq_44711316的博客
11-05 845
组件 steps.vue <template> <div class="stepBox"> //开始 <div class="stepitem" style="width:100px"> <div class="img"></div> <div :class="activestep >= 1?'circle startendcircle startenda
vue脚手架开发 + 关于steps步骤条功能的实现
m0_48940868的博客
01-05 3363
项目背景： 【由于业务需要，要做一个简单的动态steps组件来展示当前业务的状态，需要达到的效果如下图所示】 图一： 图二： 【OK，图片放出来了，下面就来说说完成这个功能踩了的坑和学到的知识，希望下一次自己遇到能不犯同样的错误】 本功能需要注意的几点： 关于数据的问题，详情页与上一级列表页面 之间 数据如何传递？ 为什么最好不要用params来传递较多的数据？ 饿了么的steps组件与本功能之间的冲突有哪些？ 【1】 很明显，数据肯定是由列表页的点击详情——详情页，在这里我犯了一个错误，我想通过这
封装一个 Vue 3 流程线可视化组件
最新发布
接着奏乐接着舞的博客
09-11 759
动态渲染：根据传入的数据，组件可以自动生成节点和箭头。风险等级样式：不同的节点根据风险等级（1-3）呈现不同的视觉效果。炫酷的动画效果：节点和箭头自带动画效果，适合用于大屏可视化项目。灵活的数据传递：通过组件的props传递数据，支持动态更新。接下来，我将带你一步步实现这个组件，并展示如何在项目中使用。通过将这个流程线组件封装成一个独立的 Vue 3 组件，你可以在不同项目中轻松复用它，并根据需求动态更新显示的数据。组件不仅支持动态渲染，还具备动画效果和风险等级区分，特别适合用于大屏数据可视化展示。
vue手写步骤条功能
焦虑的博客
01-19 1239
效果图： 可能代码质量也不太好 html代码： <div class="step"> <div> <div class="posit"> <div :class="'radius' + ' ' +(step>=1 ? 'speed-bg-color':'')"> <van-icon name="records" :color="step>=1?'#fff':''"/&
vue3手写步骤条
qq_52179917的博客
09-16 1021
1. ref响应式失效：ref之后，不会对变量直接进行更改，需要.value。2. props中的数据可以直接在页面元素中使用。
Vue3步骤条（Steps）
Mr Dear的博客
04-06 7481
引导用户按照流程完成任务的导航步骤条，支持：两种标签放置位置；迷你版步骤条；垂直版步骤条；点状步骤条；并且可点击；总之，功能丰富，简单易用😁😁
vue 手写一个步骤条。
早晚的博客
09-15 609
vue 手写一个步骤条。
VUE中自定义步骤条
Accccce的博客
03-22 4432
vue中自定义步骤条
vue 步骤条 简单思路
Alice9969的博客
07-01 2122
参考 Ant Design Vue 步骤条思路，只输入一个步骤参数即可实现 参考地址：https://www.antdv.com/components/steps-cn/ 思路：循环步骤数组，当输入的步骤是3，小于3的是绿色（通过），等于3是红色（停止） 简约图： 代码： <!DOCTYPE html> <html> <head> <title>测试</title> <link rel="stylesheet" ...
vue手写一个自定义操作的工作流
06-15
通过引入`Ant Design Vue`，我们可以使用它的`Steps`组件来展示工作流程，`Button`组件处理交互，`Form`组件创建表单用于输入条件等。然而，由于我们要手写工作流，所以可能需要根据需求自定义样式，这可以通过CSS...
步骤条Demo
09-07
步骤条的示例代码，单独的步骤条的实例以及将步骤条应用到页面上的实例。
Vue手写模拟步骤条
qq_59626859的博客
03-14 497
第一步中其实还有个属性叫 background-position也可以移动背景图片，但是我图定位方便；如果要使用element的步骤条就需要强行修改样式，参考之前的那篇步骤条。这里我采用手写div。思路是给最外层的div一个左边框，给里面的step-item设置左边框为图片，通过定位来移动。其他样式属性我删掉了，只留了关键点；
vue自己手写的步骤条组件
weixin_45444673的博客
07-02 587
vue自己手写的步骤条组件，市面上的都不喜欢，满足不了功能，自己手写了个。
Vue3 封装Step
m0_62747565的博客
02-27 290
如何自定义step呢
uniapp+vue+css手写步骤条组件
2301_76553269的博客
02-05 980
首先看需求是步骤条，然后看组件中没有自己想要的步骤条，那么就的自己去写 因为有小圈还有大圈所有上面的主体部分的进行判断，很好理解的上面都有注释，当你的数组长度最大时就不显示线条，反之显示 现在几乎实现了整体部分，但是bug出现了，就是你的部分如果高的话就会把下面部分挤出去，线条就不能正常链接了，这个问题怎么解决呢！！！别着急看下面
html+css手写一个步骤条
qq_68410134的博客
11-11 698
居中的步骤条
步骤条组件
junhian的博客
12-18 181
最近做了一个步骤条组件，使用的是vue3语法，vue2请自己做兼容。
vue3 ElementUI之Steps 步骤条使用案例（有手就会）
cty1735的博客
06-30 2738
【代码】vue3 ElementUI之Steps 步骤条。
Vue+ElementUI设计的Steps步骤条表单模板发布
资源摘要信息:"非常简洁好看的Steps 步骤条表单、申请提交表单模板.zip" 【知识点】 1. HTML与CSS基础应用 - HTML（HyperText Markup Language）是构建网页的基础语言，用于定义网页的结构与内容。描述中提到的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值