vue 实现可以转弯的步骤条

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

会拐弯的步骤条效果如下

代码部分

这边我是自己封装了一个step.vue的组件,因为需要响应式，我这边需要兼容4:3和16:9的页面(vh,vw这些是封装了样式计算宽高完成响应式布局)，所以加了一些宽度的判断

 1. 创建步骤条组件Steps.vue

<template>
  <div
    class="stepOut"
    :class="$store.getters.windowWidth <= 1024 ? 'stepOutSmall' : ''"
  >
    <ul>
      <li
        class="stepItem"
        v-for="(stepItem, index) in stepInfo.list"
        :key="index"
        :class="[
          $store.getters.windowWidth <= 1024
            ?  Math.floor(index / 3) % 2 == 0
              ? 'stepItemLeftStart'
              : 'stepItemBrother'
            :  Math.floor(index / 6) % 2 == 0
            ? 'stepItemLeftStart'
            : 'stepItemBrother',
          stepInfo.step == index ? 'stepItemProgress' : ''
        ]"
      >
        <!-- 模拟步骤条的节点，此处为数值，如果是完成的步骤则为对勾 Object.prototype.toString.call-->
        <div :class="stepInfo.step >= index + 1 ? 'icon active' : 'icon'">
          {{ stepInfo.step >= index + 1 ? '' : index + 1 }}
        </div>
        <!-- 模拟步骤条连接线，动态显示 一行最多展示6个，如果超过六个，连线则为圆弧状，如果是1024尺寸，则一行最多展示为3个
        如果此步骤能不能整除6/3或者此步骤index+1除以6/3的余数可以整除2的话，显示之前（前提：当从左往右的时，判断当前步骤的索引是否大于步骤的长度来决定显示，当为从右往左时，则判断当前索引是否大于步骤的长度来决定显示） -->
        <div
          v-if="
            $store.getters.windowWidth <= 1024
              ? (index + 1) % 3 != 0 || ((index + 1) / 3) % 2 == 0
              : (index + 1) % 6 != 0 || ((index + 1) / 6) % 2 == 0
          "
          :class="
            $store.getters.windowWidth <= 1024
              ? Math.floor(index / 3) % 2 == 0
                ? stepInfo.step >= index + 2
                  ? 'line lineActive'
                  : 'line'
                : stepInfo.step >= index + 1
                ? 'line lineActive'
                : 'line'
              : Math.floor(index / 6) % 2 == 0
              ? stepInfo.step >= index + 2
                ? 'line lineActive'
                : 'line'
              : stepInfo.step >= index + 1
              ? 'line lineActive'
              : 'line'
          "
          v-show="
            $store.getters.windowWidth <= 1024
              ? Math.floor(index / 3) % 2 == 0
                ? index + 1 !== stepInfo.list.length
                : index !== stepInfo.list.length
              : Math.floor(index / 6) % 2 == 0
              ? index + 1 !== stepInfo.list.length
              : index !== stepInfo.list.length
          "
        ></div>
        <!-- 圆弧线 
        如果可以整除6/3则为当前行的最后一个，显示为弧线 -->
        <div
          v-if="
            $store.getters.windowWidth <= 1024
              ? index != 0 && (index + 1) % 3 == 0
              : index != 0 && (index + 1) % 6 == 0
          "
          :class="[
            stepInfo.step >= index + 2
              ? 'lineCircle lineCircleActive'
              : 'lineCircle',
            $store.getters.windowWidth <= 1024
              ? ((index + 1) / 3) % 2 == 0
                ? 'lineCircleLeft'
                : ''
              : ((index + 1) / 6) % 2 == 0
              ? 'lineCircleLeft'
              : ''
          ]"
          v-show="index + 1 !== stepInfo.list.length"
        ></div>

        <!-- 步骤名称  -->
        <p class="stepStatus">{{ stepItem.title }}</p>
        <!-- 步骤描述  -->
        <p class="statusTime">{{ stepItem.description }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'steps',
  props: {
    // 传递步骤参数
    stepInfo: {
      type: Object,
      default: function () {
        return {
          list: [],
          step: 0
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.stepOut {
  width: 100%;
  height: vh(100 * 2);
  display: flex;
  justify-content: center;
  &.stepOutSmall {
    height: min_vh(100 * 2);
    .stepItem {
      width: min_vw(230 * 2);
      height: min_vh(100 * 2);
      float: left;
      font-family: 'PingFangSC-Regular';
      font-size: min_vw(14 * 2);
      text-align: center;
      position: relative;
      .lineCircle {
        left: 55%;
        top: min_vh(12 * 2);
        position: absolute;
        display: block;
        border-left-color: white;
        border-left-width: 0px;
        width: 67%;
        border-color: white white white white;
        border-left-style: hidden;
        border-left: none;
        border-top: min_vh(2 * 2) solid #c0c4cc;
        border-right: min_vh(2 * 2) solid #c0c4cc;
        border-bottom: min_vh(2 * 2) solid #c0c4cc;
        border-bottom: min_vh(2 * 2) solid #c0c4cc;
        border-left: 0px solid #c0c4cc;
        height: 102%;
        border-radius: 0px min_vw(25 * 2) min_vw(25 * 2) 0px;
      }
      &:nth-child(n + 6) {
        float: inherit !important;
        right: inherit;
      }
      &:nth-child(n + 3) {
        float: right !important;
        right: 8%;
      }
      &.stepItemLeftStart {
        float: left !important;
        right: 0;
        + .stepItemBrother {
          .line {
            display: none;
          }
        }
      }
      &.stepItemProgress {
        .icon {
          border: min_vh(2 * 2) solid rgb(48, 49, 51);
          color: rgb(48, 49, 51);
        }
        .stepStatus {
          color: #333;
        }
        .statusTime {
          color: #333;
          opacity: 0.8;
        }
      }
      .lineCircleActive {
        border-bottom: min_vh(2 * 2) solid #007cdb;
        border-top: min_vh(2 * 2) solid #007cdb;
        border-right: min_vh(2 * 2) solid #007cdb;
        border-left: 0px solid #007cdb;
      }
      .lineCircleLeft {
        left: 4%;
        width: 41%;
        border-top: min_vh(2 * 2) solid #c0c4cc;
        border-right: 0 solid #c0c4cc;
        border-bottom: min_vh(2 * 2) solid #c0c4cc;
        border-bottom: min_vh(2 * 2) solid #c0c4cc;
        border-left: min_vh(2 * 2) solid #c0c4cc;
        border-radius: min_vw(25 * 2) 0px 0px min_vw(25 * 2);
        &.lineCircleActive {
          border-bottom: min_vh(2 * 2) solid #007cdb;
          border-top: min_vh(2 * 2) solid #007cdb;
          border-right: 0 solid #007cdb;
          border-left: min_vh(2 * 2) solid #007cdb;
        }
      }

      .icon {
        width: min_vw(24 * 2);
        height: min_vw(24 * 2);
        border-radius: 50%;
        border: min_vh(2 * 2) solid #c0c4cc;
        margin: 0 auto;
        position: relative;
        z-index: 888;
        color: rgb(192, 196, 204);
      }
      .active {
        border: min_vh(2 * 2) solid #007cdb;
        color: #007cdb;
        &::after {
          content: '';
          background: url('~@/assets/img/rightCheck.png');
          width: min_vw(22 * 2);
          height: min_vw(22 * 2);
          background-size: contain;
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          margin: auto;
        }
      }
      .line {
        position: absolute;
        top: min_vh(12 * 2);
        left: 54.5%;
        border-bottom: min_vh(2 * 2) solid #c0c4cc;
        width: min_vw(208 * 2);
        z-index: 111;
      }
      .lineActive {
        border-bottom: min_vh(2 * 2) solid #007cdb;
      }
      .stepStatus {
        color: rgba(87, 87, 87, 1);
        line-height: min_vh(36 * 2);
      }
      .statusTime {
        color: rgba(87, 87, 87, 1);
        opacity: 0.5;
      }
    }
  }
  .stepItem {
    width: vw(260 * 2);
    height: vh(100 * 2);
    float: left;
    font-family: 'PingFangSC-Regular';
    font-size: vw(14 * 2);
    text-align: center;
    position: relative;
    .lineCircle {
      left: 54%;
      top: vh(12 * 2);
      position: absolute;
      display: block;
      border-left-color: white;
      border-left-width: 0px;
      width: 51%;
      border-color: white white white white;
      border-left-style: hidden;
      border-left: none;
      border-top: vh(2 * 2) solid #c0c4cc;
      border-right: vh(2 * 2) solid #c0c4cc;
      border-bottom: vh(2 * 2) solid #c0c4cc;
      border-bottom: vh(2 * 2) solid #c0c4cc;
      border-left: 0px solid #c0c4cc;
      height: 102%;
      border-radius: 0px vw(25 * 2) vw(25 * 2) 0px;
    }
    &:nth-child(n + 6) {
      float: right !important;
      right: 2%;
    }
    &.stepItemLeftStart {
      float: left !important;
      right: 0;
      + .stepItemBrother {
        .line {
          display: none;
        }
      }
    }
    &.stepItemProgress {
      .icon {
        border: vh(2 * 2) solid rgb(48, 49, 51);
        color: rgb(48, 49, 51);
      }
      .stepStatus {
        color: #333;
      }
      .statusTime {
        color: #333;
        opacity: 0.8;
      }
    }
    .lineCircleActive {
      border-bottom: vh(2 * 2) solid #007cdb;
      border-top: vh(2 * 2) solid #007cdb;
      border-right: vh(2 * 2) solid #007cdb;
      border-left: 0px solid #007cdb;
    }
    .lineCircleLeft {
      left: 5%;
      width: 41%;
      border-top: vh(2 * 2) solid #c0c4cc;
      border-right: 0 solid #c0c4cc;
      border-bottom: vh(2 * 2) solid #c0c4cc;
      border-bottom: vh(2 * 2) solid #c0c4cc;
      border-left: vh(2 * 2) solid #c0c4cc;
      border-radius: vw(25 * 2) 0px 0px vw(25 * 2);
      &.lineCircleActive {
        border-bottom: vh(2 * 2) solid #007cdb;
        border-top: vh(2 * 2) solid #007cdb;
        border-right: 0 solid #007cdb;
        border-left: vh(2 * 2) solid #007cdb;
      }
    }

    .icon {
      width: vw(24 * 2);
      height: vw(24 * 2);
      border-radius: 50%;
      border: vh(2 * 2) solid #c0c4cc;
      margin: 0 auto;
      position: relative;
      z-index: 888;
      color: rgb(192, 196, 204);
    }
    .active {
      border: vh(2 * 2) solid #007cdb;
      color: #007cdb;
      &::after {
        content: '';
        background: url('~@/assets/img/rightCheck.png');
        width: vw(22 * 2);
        height: vw(22 * 2);
        background-size: contain;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
      }
    }
    .line {
      position: absolute;
      top: vh(12 * 2);
      left: 54.5%;
      border-bottom: vh(2 * 2) solid #c0c4cc;
      width: vw(237 * 2);
      z-index: 111;
    }
    .lineActive {
      border-bottom: vh(2 * 2) solid #007cdb;
    }
    .stepStatus {
      color: rgba(87, 87, 87, 1);
      line-height: vh(36 * 2);
    }
    .statusTime {
      color: rgba(87, 87, 87, 1);
      opacity: 0.5;
    }
  }
}
</style>

 2. 在使用的页面引入Steps组件，并传入相关数据

<Steps :stepInfo="stepInfo"></Steps >
import Steps from '@/components/Steps/index';


components: {
    Steps
},

stepInfo: {
        list: [
          {
            status: '1',
            title: '步骤条1',
            description: '2021年7月7日'
          },
          {
            status: '2',
            title: '步骤条2',
            description: '2021年11月19日'
          },
          {
            status: '3',
            title: '步骤条3',
            description: '2021年12月31日'
          },
          {
            status: '4',
            title: '步骤条4',
            description: '2022年4月19日'
          },
          {
            status: '5',
            title: '步骤条5',
            description: '2022年5月1日'
          },
          {
            status: '6',
            title: '步骤条6',
            description: '2022年5月1日'
          },
          {
            status: '7',
            title: '步骤条7',
            description: '2022年7月1日'
          },
          {
            status: '8',
            title: '步骤条18',
            description: '2022年8月1日'
          },
          {
            status: '9',
            title: '步骤条19',
            description: '未完成'
          },
          {
            status: '1',
            title: '步骤条10',
            description: '2021年7月7日'
          },
          {
            status: '2',
            title: '步骤条11',
            description: '2021年11月19日'
          },
          {
            status: '3',
            title: '步骤条12',
            description: '2021年12月31日'
          },
          {
            status: '4',
            title: '步骤条13',
            description: '2022年4月19日'
          },
          {
            status: '5',
            title: '步骤条14',
            description: '2022年5月1日'
          },
          {
            status: '6',
            title: '步骤条15',
            description: '2022年5月1日'
          },
          {
            status: '7',
            title: '步骤条16',
            description: '2022年7月1日'
          },
          {
            status: '8',
            title: '步骤条17',
            description: '2022年8月1日'
          },
          {
            status: '9',
            title: '步骤条18',
            description: '未完成'
          }
        ],
        step: 14
      }
  • 注意：
  下边style中的.stepOutSmall这个类名及其下边的可以全部删掉
  页面上样式可以将vw(16*2) 、vh(16*2)这种的改为16px;
  如果觉得改vw vh很麻烦可以使用下列函数放入你的文件中



    @function vw($px) {
  // 进行计算操作
  $result: ($px / 2);
  $factor: 100000;
  $roundedValue: round($result * $factor);
  $roundedResult: $roundedValue / $factor;

  @return #{$result}px;

}
@function vh($px) {
  $result: ($px / 2);
  $factor: 100000;
  $roundedValue: round($result * $factor);
  $roundedResult: $roundedValue / $factor;
  @return #{$result}px;
}

    如果具体想查看vw函数使用方法，请看vue 响应式页面使用transform实现_vue 页面缩小事件-CSDN博客

皮卡丘-杰尼龟
关注
  • 7
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 30
    评论
会拐弯的步骤条，需求每个节点使用步骤条，但是需要蛇形转弯，百度了一下 竟然没有，自己用js做了一个
qq_56832917的博客
11-03 1348
会拐弯的步骤条，需求每个节点使用步骤条，但是需要蛇形转弯，百度了一下 竟然没有，自己用js做了一个
步骤条Demo
09-07
步骤条的示例代码，单独的步骤条的实例以及将步骤条应用到页面上的实例。
实现会拐弯的时间轴
Kate_sicheng的博客
12-19 2461
纯css实现会拐弯且能自适应屏幕宽度的时间轴。
vue 实现拐弯时间线，弯曲时间线，弯曲任务步骤条
最新发布
qq_44552416的博客
01-03 1135
实现可拐弯的步骤条功能。
vue element 实现分页功能
s1ngle的博客
09-30 2321
最近在学分页功能，这里总结下前端如何实现分页 用的是element框架和el-pagination组件 效果图: template代码： <el-pagination :page-size="pageSize" // 设置每页显示多少条 @current-change="currentChangeHandle" // 当前页数改变时调用函数 :current-page="currentPage" // 当前第几页 layout="total
拐弯时间线，弯曲时间线，弯曲任务
weixin_45266081的博客
03-08 674
【代码】拐弯时间线，弯曲时间线，弯曲任务。
会拐弯的步骤条
qq_56832917的博客
11-03 573
会拐弯的蛇形步骤条，全网仅此一份
在Vue实现自定义步骤条
热门推荐
鲁小班的博客
05-30 1万+
利用vue实现的自定义样式的步骤条；关键点：用到了三目运算，v-show 效果图 页面的源码
js实现拐弯的步骤条
qq_56832917的博客
11-03 306
具体用法，有问题在问我
vue+css实现的步骤条（项目时间进度条）效果
qq_44480414的博客
01-29 3161
进行作业时，因为element提供的步骤条样式太少了，就自己写了个，整体效果如图所示 功能： 可以根据所传的数组，去分布步骤条的总需步骤 根据数组里对象的state属性，可以显示步骤条的进度 liner组件代码 <template> <div> <div v-for="(item, index) in option" :key="index" class="container" :style="{width: (1.
vue实现新闻展示页的步骤详解
10-17
最近小编遇到这样的需求，要实现一个新闻展示页功能，刚接到这样的需求还真是一头雾水，不知从哪入手，今天小编通过实例代码给大家介绍下vue实现新闻展示页的步骤详解，感兴趣的朋友跟随小编一起看看吧
vue 流程图，拖拽创建 可以画箭头连接元素
01-09
vue 流程图，拖拽创建 可以画箭头连接元素
Vue实现Layui的集成方法步骤
10-15
主要介绍了Vue实现Layui的集成方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue的滚动条插件实现代码
12-29
这篇文章主要介绍了vue的滚动条插件实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果如下 代码如下 <div class=vue-scroll ref=vueScrollW> ...
vue实战范例——箭头步骤条/导航（含css 斜切skew的妙用）
朝阳39的博客
09-25 2122
<template> <div> <div class="arrowsBox"> <div class="arrowsItem" v-for="(item, index) in list" :key="index"> <div class="arrows-up arrows" :class="{ arrows_active: item.status .
vue2 使用组件 实现步骤条
promise466的博客
02-16 1006
本案例纯属练习vue组件参考，实际工作中为提高效率此类组件都是直接引用。（代码部分有部分注释，有不理解的可以留言哦）
vue 沿着弧线拖拽进度条_canvas实现弧形可拖动进度条效果
weixin_39632982的博客
12-19 1254
一、效果如下：二、三、1、首先在html中创建一个canvas标签2、创建一个进度条对象，编写初始化方法,获取canvas对象及上下文环境；event方法是用来绑定事件(具体后面介绍)；draw是用来绘图的方法，这里把Draw对象的全部方法赋给draw方法；创建绘图实例p，绘制初始图形；var Draw={init:function(){this.obj=document.getElementBy...
vue+element-ui实现自定义即时编辑步骤条
WULIhuihui的博客
08-06 5735
在做后台管理时有一个需求：需要在步骤条上即时编辑内容，并查看效果，我们的后台用到的技术栈是vue+element-ui, elementUI的官方给的是有步骤条这个组件的，如下： 看到示例及参数配置后，，果然远远满足不了需求，只能自己动手组装一个了，还好，vue给我们的组件机制可以很快很便捷的开发出我们想要的东西，于是我在element-ui中东拼西凑了一下，首先说一下我用到的组件，即时可编辑，...
基于Vue3+LeaderLine实现画线测距及线条自由调整
算法小生
07-15 852
先看下效果：我们画线后可以根据比例关系自动计算距离，并且线条不对可以自由调整。欢迎关注公众号 算法小生。
vue steps 步骤条换行具体实现
04-16
对于您的问题，我可以回答。在Vue的步骤条组件中，可以通过设置每个步骤的样式来实现换行。具体实现方法可以参考以下代码示例： ``` <template> <div> <el-steps :active="activeStep" :align-center="true" direction="vertical"> <el-step title="Step 1" description="This is a long description to show how the text wraps around to the next line"></el-step> <el-step title="Step 2" description="Another long description to test the line breaks in the text"></el-step> <el-step title="Step 3" description="Short description"></el-step> </el-steps> </div> </template> ``` 在上述示例中，设置了步骤条的样式为纵向排列，并且通过设置`description`属性来实现换行。如果描述文字比较长，可以考虑使用`slot`插槽来自定义步骤条的样式。 希望这个回答对您有所帮助。如果您有其他问题，可以继续问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 30
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值