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

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

2024-08-15 97
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章介绍了如何在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
目录
相关文章
。思索
|
4月前
|
JavaScript
Vue——initProvide【十一】
Vue——initProvide【十一】
。思索
36 0
多加点香菜85
|
7月前
|
资源调度 JavaScript
Vue + Element-ui组件上传图片报错问题解决方案
Vue + Element-ui组件上传图片报错问题解决方案
多加点香菜85
263 1
热爱技术的小郑
|
4月前
|
JavaScript
在Vue中使用Avue、配置过程以及实际应用
这篇文章介绍了作者在Vue项目中使用Avue组件库的体验，包括安装配置过程和实际应用示例，展示了如何通过Avue实现动态增加输入框和输入验证的功能。
热爱技术的小郑
93 1
在Vue中使用Avue、配置过程以及实际应用
fruge365
|
5月前
|
JavaScript
【vue】vue 在线编辑、实时预览的代码交互组件 vue-code-view
【vue】vue 在线编辑、实时预览的代码交互组件 vue-code-view
fruge365
971 0
吉士先生
|
JavaScript 前端开发
85.【Vue-细刷-01】（十一）
85.【Vue-细刷-01】
吉士先生
73 1
t75yjb52rsccc
|
JavaScript
Vue框架的学习(Vue的基础指令操作一)第二课
Vue框架的学习(Vue的基础指令操作一)第二课
t75yjb52rsccc
61 0
jcLee95
|
7月前
|
前端开发 JavaScript
vue组件制作专题 - （mpvue专用）在mpvue中手写css实现简单左右轮播
vue组件制作专题 - （mpvue专用）在mpvue中手写css实现简单左右轮播
jcLee95
54 0
王同学睡醒了
【Vue2.0】—组件（十一）
【Vue2.0】—组件（十一）
王同学睡醒了
36 0
王同学睡醒了
|
JavaScript
【Vue学习】—Vue UI组件库（二十八）
【Vue学习】—Vue UI组件库（二十八）
王同学睡醒了
59 0
OBKoro1
|
前端开发 JavaScript
论如何用Vue实现一个弹窗-一个简单的组件实现
最近在使用element-ui框架，用到了Dialog对话框组件，大致实现的效果，跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。然后就想着把这种弹窗组件的实现方式与大家分享一下，下面本文会带着大家手摸手实现一个弹窗组件。 本文主要内容会涉及到弹窗遮罩的实现，slot插槽的使用方式，props、$emit传参，具体组件代码也传上去了。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。
OBKoro1
2584 0
论如何用Vue实现一个弹窗-一个简单的组件实现

热门文章

最新文章

  • 1
    CentOS7 yum的一次报错" 14: curl#56 - "Recv failure: Connection reset by peer" "
  • 2
    使用cProfile等工具来提高python的执行速度
  • 3
    四大触点，教你从“用户视角”构建数据分析体系
  • 4
    Spring-boot+Dubbo应用启停源码分析
  • 5
    Myeclipse常用优化1
  • 6
    Android开发学习笔记：数据存取之File浅析
  • 7
    Android Service完全解析，关于服务你所需知道的一切(下)
  • 8
    【妄言之言】致二十四岁的自己
  • 9
    oracle 11g adrci 工具使用方法
  • 10
    S3C2410-WinCE6.0-OAL的快速调试
  • 1
    《容器化赋能：C++人工智能模型部署的卓越之道》
    31
  • 2
    《C++与类脑芯片：开启人工智能硬件新征程》
    32
  • 3
    《C++与AMD ROCm：人工智能计算的强力引擎》
    34
  • 4
    《C++携手英特尔OpenVINO：加速人工智能推理新征程》
    29
  • 5
    《C++ 赋能强化学习：Q - learning 算法的实现之路》
    24
  • 6
    鸿蒙开发：ForEach中为什么键值生成函数很重要
    23
  • 7
    AI+脱口秀，笑点能靠算法创造吗
    30
  • 8
    「Mac畅玩鸿蒙与硬件45」UI互动应用篇22 - 评分统计工具
    102
  • 9
    AI客服会完全替代人工客服吗
    23
  • 10
    影智科技唐沐：人形是累赘，具身智能并不缺少落地场景
    25

    • 相关课程

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

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • 基于VUE的单页面性能优化实践
  • JS零基础入门教程（上册）

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    DataWorks