AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

基于Vue2超简单实现DIY定制的步骤条

2024-08-15 62
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章介绍了如何在Vue 2中实现一个自定义设计的步骤条组件，包括子组件的设计和在父页面中的使用示例。

前言

由于一些定制化的需求无法在网上直接找到可用插件来实现，只能DIY设计实现，如以下步骤条。

一、首先设计子组件

（1）【/src/Example/DiyStep/component/SkyStep.vue】

<template>
  <div>
    <ul class="diy-steps">
      <li v-for="(item, index) in stepList" :key="index">
        <div class="diy-step">
          <div class="diy-step-line_left" v-if="index === 0 && item.status === 'undone'" :style="'background-image: linear-gradient(' + '90deg' + ', #ffffff, #bbbbbb)'"/>
          <div class="diy-step-line_left" v-if="index === 0 && item.status !== 'undone'" :style="'background-image: linear-gradient(' + '90deg' + ', #ffffff, #4cb45b)'"/>
          <div class="diy-step-line_left" v-else-if="index !== 0 && item.status === 'undone'" :style="'background-image: linear-gradient(' + '0deg' + ', #bbbbbb, #bbbbbb)'"/>
          <div class="diy-step-line_left" v-else-if="index !== 0 && item.status !== 'undone'" :style="'background-image: linear-gradient(' + '0deg' + ', #4cb45b, #4cb45b)'"/>

          <div class="diy-step-box diy-step__success" v-if="item.status === 'success'">
            <span>
              <i class="el-icon-check"></i>
            </span>
            <strong>{
  
  { item.label }}</strong>
          </div>

          <div class="diy-step-box diy-step__fail" v-else-if="item.status === 'fail'">
            <span>
              <i class="el-icon-close"></i>
            </span>
            <strong>{
  
  { item.label }}</strong>
          </div>

          <div class="diy-step-box diy-step__doing" v-else-if="item.status === 'doing'">
            <span>
              <i class=""></i>
            </span>
            <strong>{
  
  { item.label }}</strong>
          </div>

          <div class="diy-step-box diy-step__undone" v-else-if="item.status === 'undone'">
            <span>
              <i class=""></i>
            </span>
            <strong>{
  
  { item.label }}</strong>
          </div>

          <div class="diy-step-line_right" v-if="index === stepList.length - 1 && item.status === 'success'" :style="'background-image: linear-gradient(' + '90deg' + ', #4cb45b, #ffffff)'"/>
          <div class="diy-step-line_right" v-else-if="index === stepList.length - 1 && item.status === 'fail'" :style="'background-image: linear-gradient(' + '90deg' + ', #4cb45b, #ffffff)'"/>
          <div class="diy-step-line_right" v-else-if="index === stepList.length - 1 && item.status === 'doing'" :style="'background-image: linear-gradient(' + '90deg' + ', #bbbbbb, #ffffff)'"/>
          <div class="diy-step-line_right" v-else-if="index === stepList.length - 1 && item.status === 'undone'" :style="'background-image: linear-gradient(' + '90deg' + ', #bbbbbb, #ffffff)'"/>
          <div class="diy-step-line_right" v-else-if="index !== stepList.length - 1 && item.status === 'undone' && (index + 1 <= stepList.length - 1) && stepList[index + 1].status === 'undone' " :style="'background-image: linear-gradient(' + '180deg' + ', #bbbbbb, #bbbbbb)'"/>
          <div class="diy-step-line_right" v-else-if="index !== stepList.length - 1 && item.status !== 'undone' && (index + 1 <= stepList.length - 1) && stepList[index + 1].status === 'undone' " :style="'background-image: linear-gradient(' + '180deg' + ', #bbbbbb, #bbbbbb)'"/>
          <div class="diy-step-line_right" v-else-if="index !== stepList.length - 1 && item.status !== 'undone' && (index + 1 <= stepList.length - 1) && stepList[index + 1].status !== 'undone' " :style="'background-image: linear-gradient(' + '180deg' + ', #4cb45b, #4cb45b)'"/>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    
    
  props: ['stepList'],
  data: () => ({
    
    
    // stepList : [
    //   {label: '准备好所有的食材', status: 'success'},
    //   {label: '把茶叶和白砂糖放入锅中', status: 'success'},
    //   {label: '将其翻炒至冒泡', status: 'fail'},
    //   {label: '加入白开水煮沸', status: 'doing'},
    //   {label: '倒入纯牛奶', status: 'undone'},
    //   {label: '滤出茶叶就好了', status: 'undone'}
    // ],
  })
}
</script>

<style lang="less">
  .diy-steps {
    
    
    display: flex;
    width: 100%;
    height: 55px;
    margin: 15px auto 0 auto;
    padding: 0;
    position: relative;
    font-family: "微软雅黑";
    overflow: hidden;
  }

  .diy-steps li {
    
    
    width: auto;
    height: 100%;
    flex: 1;
    list-style-type: none;
    font-size: 12px;
    text-align: center;
    position: relative;
    float: left;
  }

  .diy-steps li .diy-step {
    
    
    width: 100%;
    display: inline-block;
    position: relative;
    z-index: 1;
  }

  .diy-step-line_left {
    
    
    border-bottom: 1px solid transparent;
    background-image: linear-gradient(90deg, #bbbbbb, #4cb45b);
    width: 50%;
    height: 1px;
    display: inline-block;
    position: absolute;
    top: 9px;
    left: 0;
    z-index: 0;
  }

  .diy-step-line_right {
    
    
    border-bottom: 1px solid transparent;
    background-image: linear-gradient(180deg, #bbbbbb, #4cb45b);
    width: 50%;
    height: 1px;
    display: inline-block;
    position: absolute;
    top: 9px;
    right: 0;
    z-index: 0;
  }

  .diy-steps li .diy-step .diy-step-box {
    
    
    position: relative;
    z-index: 1;
  }

  .diy-steps li .diy-step .diy-step-box span {
    
    
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 100%;
    color: #fff;
    /* transform: scale(1.2); */
    text-align: center;
    margin: 0 auto 8px auto;
  }

  .diy-steps li .diy-step .diy-step-box span i {
    
    
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 100%;
    line-height: 13px;
  }

  .diy-steps li .diy-step .diy-step-box strong {
    
    
    letter-spacing: 0.5px;
  }

  /* diy-step__success */
  .diy-step__success span {
    
    
    border: rgba(55, 171, 71, 0.2) 4px solid;
    border: rgb(215 238 218) 4px solid;
  }

  .diy-step__success span i {
    
    
    background-color: #37ab47;
  }

  .diy-step__success strong {
    
    
    color: #37ab47;
  }
  /* / diy-step__success */

  /* diy-step__fail */
  .diy-step__fail span {
    
    
    border: rgba(252, 94, 90, 0.2) 4px solid;
    border: rgb(254 223 222) 4px solid;
  }

  .diy-step__fail span i {
    
    
    background-color: #fc5e5a;
  }

  .diy-step__fail strong {
    
    
    color: #fc5e5a;
  }
  /* / diy-step__fail */

  /* diy-step__doing */
  .diy-step__doing span {
    
    
    border: rgba(94, 124, 224, 0.2) 4px solid;
    border: rgb(223 229 249) 4px solid;
  }

  .diy-step__doing span i {
    
    
    background-color: #5e7ce0;
  }

  .diy-step__doing strong {
    
    
    color: #5e7ce0;
  }
  /* / diy-step__doing */

  /* diy-step__undone */
  .diy-step__undone span {
    
    
    border: rgba(153, 153, 153, 0.2) 4px solid;
    border: rgb(235 235 235) 4px solid;
  }

  .diy-step__undone span i {
    
    
    background-color: #999999;
  }

  .diy-step__undone strong {
    
    
    color: #999999;
  }
  /* / diy-step__undone */
</style>

二、然后实现父页面

（2）【/src/Example/DiyStep/index.vue】

<template>
  <div>
    <SkyStep :stepList="stepList1"/>
    <SkyStep :stepList="stepList2"/>
    <SkyStep :stepList="stepList3"/>
    <SkyStep :stepList="stepList4"/>
    <SkyStep :stepList="stepList5"/>
    <SkyStep :stepList="stepList6"/>
    <SkyStep :stepList="stepList7"/>
  </div>
</template>

<script>
import SkyStep from './components/SkyStep.vue'

export default {
    
    
  components: {
    
    
    SkyStep
  },
  data: () => ({
    
    
    stepList1: [
      {
    
     label: '准备好所有的食材', status: 'doing' },
      {
    
     label: '把茶叶和白砂糖放入锅中', status: 'undone' },
      {
    
     label: '将其翻炒至冒泡', status: 'undone' },
      {
    
     label: '加入白开水煮沸', status: 'undone' },
      {
    
     label: '倒入纯牛奶', status: 'undone' },
      {
    
     label: '滤出茶叶就好了', status: 'undone' }
    ],

    stepList2: [
      {
    
     label: '准备好所有的食材', status: 'success' },
      {
    
     label: '把茶叶和白砂糖放入锅中', status: 'doing' },
      {
    
     label: '将其翻炒至冒泡', status: 'undone' },
      {
    
     label: '加入白开水煮沸', status: 'undone' },
      {
    
     label: '倒入纯牛奶', status: 'undone' },
      {
    
     label: '滤出茶叶就好了', status: 'undone' }
    ],

    stepList3: [
      {
    
     label: '准备好所有的食材', status: 'success' },
      {
    
     label: '把茶叶和白砂糖放入锅中', status: 'fail' },
      {
    
     label: '将其翻炒至冒泡', status: 'doing' },
      {
    
     label: '加入白开水煮沸', status: 'undone' },
      {
    
     label: '倒入纯牛奶', status: 'undone' },
      {
    
     label: '滤出茶叶就好了', status: 'undone' }
    ],

    stepList4: [
      {
    
     label: '准备好所有的食材', status: 'success' },
      {
    
     label: '把茶叶和白砂糖放入锅中', status: 'success' },
      {
    
     label: '将其翻炒至冒泡', status: 'fail' },
      {
    
     label: '加入白开水煮沸', status: 'doing' },
      {
    
     label: '倒入纯牛奶', status: 'undone' },
      {
    
     label: '滤出茶叶就好了', status: 'undone' }
    ],

    stepList5: [
      {
    
     label: '准备好所有的食材', status: 'success' },
      {
    
     label: '把茶叶和白砂糖放入锅中', status: 'success' },
      {
    
     label: '将其翻炒至冒泡', status: 'success' },
      {
    
     label: '加入白开水煮沸', status: 'fail' },
      {
    
     label: '倒入纯牛奶', status: 'doing' },
      {
    
     label: '滤出茶叶就好了', status: 'undone' }
    ],

    stepList6: [
      {
    
     label: '准备好所有的食材', status: 'success' },
      {
    
     label: '把茶叶和白砂糖放入锅中', status: 'success' },
      {
    
     label: '将其翻炒至冒泡', status: 'success' },
      {
    
     label: '加入白开水煮沸', status: 'success' },
      {
    
     label: '倒入纯牛奶', status: 'fail' },
      {
    
     label: '滤出茶叶就好了', status: 'doing' }
    ],

    stepList7: [
      {
    
     label: '准备好所有的食材', status: 'success' },
      {
    
     label: '把茶叶和白砂糖放入锅中', status: 'success' },
      {
    
     label: '将其翻炒至冒泡', status: 'success' },
      {
    
     label: '加入白开水煮沸', status: 'success' },
      {
    
     label: '倒入纯牛奶', status: 'success' },
      {
    
     label: '滤出茶叶就好了', status: 'success' }
    ]
  })
}
</script>

<style lang="less" scoped>

</style>

三、运行效果

文章标签：
JavaScript
Yaiba123
目录
相关文章
游客62mqllx53nctc
|
12天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
游客62mqllx53nctc
40 3
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
刻刻帝的海角
|
6月前
|
JavaScript 定位技术 容器
Vue项目中引入地图的详细教程
Vue项目中引入地图的详细教程
刻刻帝的海角
157 0
特创码农
|
6月前
|
JavaScript
Uniapp Vue3 基础知识点附带实例
Uniapp Vue3 基础知识点附带实例
特创码农
94 0
锅盖哒
|
6月前
|
JavaScript 开发工具 开发者
vue.cli 中怎样使用自定义的组件
vue.cli 中怎样使用自定义的组件
锅盖哒
43 0
破浪前进
|
6月前
|
JavaScript 前端开发 API
Vue3上手步骤
Vue3上手步骤
破浪前进
91 0
前端歌谣
|
前端开发
前端学习笔记202305学习笔记第二十天-vue3.0-把element-ui组件导入封装为特定模块
前端学习笔记202305学习笔记第二十天-vue3.0-把element-ui组件导入封装为特定模块
前端歌谣
70 0
陈书予
|
JavaScript UED
【三十天精通Vue 3】第二十七天 Vue 3的实战案例-接口进度条
【三十天精通Vue 3】第二十七天 Vue 3的实战案例-接口进度条
陈书予
356 0
candytong
|
JavaScript 前端开发 UED
使用 unplugin-vue-components 按需引入组件（内附实现原理）
使用 unplugin-vue-components 按需引入组件（内附实现原理）
candytong
857 0
游客ekifwqb233tlk
|
前端开发 JavaScript 测试技术
Vue3原理实战运用，我用40行代码把他装进了React做状态管理
vue-next是Vue3的源码仓库，Vue3采用lerna做package的划分，而响应式能力@vue/reactivity被划分到了单独的一个package中。 如果我们想把它集成到React中，可行吗？来试一试吧。
游客ekifwqb233tlk
136 0
aehyok
|
JavaScript 前端开发 API
手写50行代码实现vue中this是如何访问data和methods,并调试vue源码详细解剖原理
查看根目录可以轻松的发现pnpm-workspace.yaml和pnpm-lock.yaml，那么就说明尤大大把vue2.7+也升级到pnpm。
aehyok
178 0

热门文章

最新文章

  • 1
    Flink: 实时规则引擎助力新零售发展
  • 2
    Apache Flink 进阶（三）：Checkpoint 原理解析与应用实践
  • 3
    weex-html5 组件进阶
  • 4
    Oracle自动清理日志脚本
  • 5
    1.8. Drums
  • 6
    hp M1530一体机无法在OEM系统下安装驱动
  • 7
    挑战OOAD：游戏中物品使用时候的不同功能，用OO的方式，该如何设计？
  • 8
    Android开发：Kotlin下配置DataBinding
  • 9
    分享25佳优秀的 Photoshop 教程
  • 10
    [转]ExtJs里使用FckEditor
  • 1
    构建高性能RESTful API：最佳实践与避坑指南###
    22
  • 2
    深入理解Python装饰器：从入门到实践####
    19
  • 3
    智能机器人在工业自动化中的应用与前景###
    17
  • 4
    箭头函数不能使用哪些关键字？
    74
  • 5
    深度学习在图像识别中的应用与挑战
    19
  • 6
    哪些场景适合使用 ES6 的箭头函数？
    20
  • 7
    深入理解Linux内核调度器：公平性与性能的平衡####
    17
  • 8
    深入理解PHP中的面向对象编程（OOP）
    21
  • 9
    es6变量声明与解构赋值
    15
  • 10
    JSONP 劫持的防范需要考虑哪些因素？
    74

    • 相关课程

    更多
  • Vue.js完全自学手册图文教程
  • Vue.js 入门与实战
  • React 入门教程开发文档
  • React 入门与实战
  • Node.js 入门教程文档
  • jQuery开发教程

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • 基于VUE的单页面性能优化实践
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    无影云桌面