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

已于 2024-01-28 15:51:59 修改
阅读量3.7k 收藏 15
点赞数 1
分类专栏： # Vue 前端大杂烩 前端三大框架 文章标签： 前端
于 2022-08-23 20:08:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cai181191/article/details/126491989
版权

前言

由于一些定制化的需求无法在网上直接找到可用插件来实现，只能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>

三、运行效果

Yaiba123
关注
专栏目录
基于Vue3实现简单的mini-vue之实现reactive
10-05
实现最简 vue3 模型，用于深入学习 vue3， 让你更轻松的理解 vue3 的核心逻辑。 当我们需要深入学习 vue3 时，我们就需要看源码来学习，但是像这种工业级别的库，源码中有很多逻辑是用于处理边缘情况或者是兼容处理...
vue2 自定义步骤条
l851109001的博客
03-18 1296
实现效果： 实现过程： 组件代码： <!-- component-name --> <template> <div class="steeps"> <div class="step_item" v-for="(v, i) in stepData" :key="i"> <div class="step_line" :class="[i < active ? 'step_line_fo
步骤条制作 -- vue
qq_42451776的博客
12-25 682
示例 使用 使用 <kl-steps :active="activeStep"> <kl-step title="步骤 1"> <p class="f-14">步骤 1 --补充 步骤 1 --补充步骤 1 --补充</p></kl-step > <kl-step title="步骤 2"> 步骤 2 --补充 &lt
vue&ant-design-vue页面DIY,商城个性化设计,H5装修
最新发布
weixin_45374947的博客
07-30 229
如下图所示，PC端（编辑端）分为三个部分左侧基础组件栏、中部主体展示区域、右侧操作菜单栏。所用技术：Vue + and-design-vue + vuedraggable。通过简单的拖拽可以实现对页面的编辑，可以自定义组件的样式、内容，展示顺序等。
vue 实现可以转弯的步骤条
weixin_46328739的博客
06-01 3326
会拐弯的步骤条效果如下。
Vue2步骤条（Steps）
热门推荐
Mr Dear的博客
08-04 1万+
步骤总数和初始选择步骤 均可自定义设置，每个步骤title和description也均可自定义设置传入
Vue3步骤条（Steps）
Mr Dear的博客
04-06 6858
引导用户按照流程完成任务的导航步骤条，支持：两种标签放置位置；迷你版步骤条；垂直版步骤条；点状步骤条；并且可点击；总之，功能丰富，简单易用😁😁
vue 实现任务步骤条
m0_74265396的博客
01-04 806
在组件的模板中，我们使用v-for指令来遍历items数组，为每个步骤创建一个.timeline-item元素。在.timeline-item元素中，我们使用.item-content来显示步骤内容，使用.connector-wrapper和.connector来创建连接器。在CSS样式中，我们定义了.timeline元素为一个水平的flex容器，每个步骤通过.flex-item的样式来排列。通过使用类似的结构和样式，您可以根据具体需求来实现不同形状和效果的拐弯时间线、弯曲时间线或弯曲任务步骤条。
VUE步骤条组件
程序员劝退师的博客
01-26 8153
前言 最近和朋友一起做一个关于程序员赚外快的项目，找了个UI出了个界面，这个美术妹子声音贼好听，御姐类型的，爱了爱了！这个美术妹子估计不知道我是做后端的，前端不是特别专业，她也不问我能不能做出这种效果就把界面搞完了，这就有点难为我了！写到发布问题这个界面的时候有一个步骤条这个功能，我试着写了一下，大致上是这么个意思，但是我觉得不是特别完美，然后我就想偷懒看看有没有现成的组件，找了一些博文，要么是样式不符合，要么就是用图片实现的，局限性太大了，那么我就劳苦一下吧，写了这个VUE插件！请看下图！ 关于vue-
vue实现流程步骤条
jaychou1979的博客
12-17 8715
@[vue实现流程步骤条) vue实现流程步骤条 实现效果 第一步： 第二步： 第三步 代码部分 html部分 <div class="reset-steps"> <div v-for="(item, index) in step" :key="index"> <img v-if="current >= index" :src="item.imgActive" alt=""> <img v-else :src="it
vue-基于vue实现的简易留言板项目.zip
05-04
在这个基于Vue实现的简易留言板项目中，我们将深入探讨如何利用Vue.js的基本特性来构建一个功能完整的交互式应用。 1. **项目初始化** - 使用`vue-cli`工具初始化项目，通过`vue create`命令创建一个基本的Vue项目...
vue-layout-diy:基于vue和flex的自定义布局
05-16
vue-layout-diy 基于vue和flex的自定义布局，。 S前缀为Sunflower简写，我们团队的命名空间。 项目步骤 使用vue-cli@2.9.3初始化项目； vue init webpack vue-layout-diy 根据个人/团队代码规范，配置eslint； 安装...
基于vue实现可搜索下拉框定制组件
08-27
基于 Vue 实现可搜索下拉框定制组件 本文将详细介绍基于 Vue 实现可搜索下拉框定制组件的方法和技术要点，旨在帮助读者更好地理解和运用 Vue Framework。 组件概述 在 Vue 中实现可搜索下拉框定制组件主要涉及到...
基于vue2实现上拉加载功能
08-28
基于Vue2实现上拉加载功能的步骤 1. 创建上拉加载组件 首先，我们需要创建一个上拉加载组件，用于处理上拉加载的逻辑。在这个组件中，我们需要定义一些必要的属性，如`maxDistance`、`autoFill`、`distanceIndex`...
vue实现的步骤条组件——2种方法
qq_45234274的博客
10-09 3945
一、 语言：vue 样式如下： 2.代码:根据长度百分比计算样式 <template> <!-- 步骤条盒子 --> <div class="steps-box"> <!-- 步骤条 --> <div class="Article-steps" :class="data.stepList.length <= activeIndex ? 'step-over' : ''" >
VUE中自定义步骤条
Accccce的博客
03-22 4386
vue中自定义步骤条
vue实现自定义步骤条
zzqz的博客
11-19 9162
首先看一下实现的效果： 来看看实现过程： 公共插件 <!-- Step.vue --> <template> <div class="stepOut"> <ul> <li class="stepItem" v-for="(stepItem, index) in stepInfo.list" :key="index...
vue实现步骤条
qq_48378883的博客
10-17 604
el-input v-model="registerForm.bussScope" type="textarea" :rows="7" auto-complete="off" placeholder="请输入经营范围" clearable />
JS和JQuery监听滚动条事件
都随它大小便吧
09-21 1万+
网上查了一下，找到两种js监听滚轮事件的方法 （1）window.onscroll = function() {} （2）document.addEventListener("onscroll", function (e) {}) js例子： <a id="scrollup" href="#top" style="position:fixed;z-index: 999;displ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值