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

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

2024-08-15 492
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章介绍了如何在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
目录
相关文章
破浪前进
|
移动开发 JavaScript 小程序
uView Steps 步骤条
uView Steps 步骤条
破浪前进
490 0
theMuseCatcher
Vue2步骤条（Steps）
这是一个基于 Vue3 的步骤条（Steps）组件，支持高度自定义。主要属性包括步骤标题数组（stepsLabel）、步骤描述数组（stepsDesc）、步骤总数（totalSteps，默认为3）、当前选中的步骤（currentStep，默认为1）、步骤条总宽度（totalWidth，默认为900px）和描述文本最大宽度（descMaxWidth，默认为140px）。组件通过不同的样式展示已完成、进行中和未开始的状态，并支持点击切换步骤。可在需要的页面中引入并传入相关初始数据。
theMuseCatcher
487 1
Vue2步骤条（Steps）
请你喝杯Java
手把手教你将uView UI配置到uniapp项目中
手把手教你将uView UI配置到uniapp项目中
请你喝杯Java
2170 0
手把手教你将uView UI配置到uniapp项目中
theMuseCatcher
Vue3步骤条（Steps）
这是一个基于 Vue2 的步骤条（Steps）组件，支持多种自定义属性，如步骤数组、宽度、大小、垂直显示、标签位置等。通过 `v-model` 可实现步骤的动态切换和点击交互。提供了丰富的样式调整选项，适用于各种场景下的多步骤流程引导。组件内详细展示了如何创建和使用步骤条，并提供了多个示例代码片段。
theMuseCatcher
1971 4
Vue3步骤条（Steps）
34789737
|
9月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
641 17
嘘~！
|
Web App开发 缓存 JavaScript
优化Vue首页加载速度的实用方法
优化Vue首页加载速度的实用方法
嘘~！
265 1
胡东旭
|
存储 小程序 Java
【小程序分包】小程序包大于2M，来这教你分包啊
本文介绍了如何通过分包解决uniapp小程序包体积过大的问题。由于版本升级导致包体积超过2M，即使压缩静态资源也无法满足发布要求。文章详细讲解了分包的原因、步骤及注意事项，并提供了实操示例，帮助读者理解并实现小程序分包，从而减小主包大小
胡东旭
1372 2
【小程序分包】小程序包大于2M，来这教你分包啊
无妄的罪
el-upload图片上传，删除
el-upload是ElementUI中的一个组件，可以用来实现图片上传功能。下面是一个基本的el-upload的示例代码：
无妄的罪
901 0
theMuseCatcher
Vue3标签页（Tabs）
该组件提供可自定义的标签页功能，支持居中显示、不同尺寸与样式，并能设置当前激活选项。其主要属性包括标签页数组、居中显示、尺寸、样式、间隙及激活键值。示例展示了基本使用、卡片式标签页、禁用选项、左右滑动等功能。组件基于Vue3开发，并利用`useResizeObserver`等技术实现。[在线预览](https://themusecatcher.github.io/vue-amazing-ui/guide/components/tabs.html)。
theMuseCatcher
1116 0
Vue3标签页（Tabs）
石小石Orz
|
前端开发 JavaScript 编译器
Vite中预处理器(如less)的配置
【8月更文挑战第2天】Vite中预处理器(如less)的配置
石小石Orz
1665 4

热门文章

最新文章

  • 1
    什么是中间件，中间件是什么意思？
  • 2
    Docker容器内Permission denied解决方法
  • 3
    深度学习和自然语言处理：诠释词向量的魅力
  • 4
    【YOLOv8改进】Polarized Self-Attention: 极化自注意力 (论文笔记+引入代码)
  • 5
    编译错误CS1595
  • 6
    Silverlight实用窍门系列：61.Silverlight中的Trigger触发器,自定义翻页触发器
  • 7
    撰写oracle-sql-hint的注意事项
  • 8
    WinForm 换行问题 textbox (转)
  • 9
    char的本质
  • 10
    SQL SERVER2005 中的错误捕捉与处理
  • 1
    四旋翼飞行器UAV_MPC模型预测轨迹跟踪控制研究（Matlab代码实现）
    46
  • 2
    OpenClaw“龙虾”入驻百度贴吧实操教程：从部署到发帖全攻略
    354
  • 3
    部署OpenClaw有哪些成本？附OpenClaw低成本部署指南
    235
  • 4
    GLTF 与 GLB：哪种格式适合你的 3D 项目
    37
  • 5
    什么是 glb/glTF 格式，为什么它们对 3D 设计师如此重要？
    83
  • 6
    Maven settings.xml 最全配置详解：从入门到精通
    202
  • 7
    ESP C3 Super Mini 踩坑记：WiFi 能搜到却连不上？降低功率试试
    71
  • 8
    RouteRAG：用特殊 Token 和强化学习构建可学习的 RAG 检索策略
    66
  • 9
    Nimbus 高分辨率红外辐射计数字条带数据 L1，HDF5 V001
    44
  • 10
    最真实的模拟炒股软件，模拟资产操作Move模块
    101

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云重磅发布Agentic SOC，企业级AI Agent驱动的安全运营平台