vue自己手写的步骤条组件

弃疗咸鱼的笔记

已于 2024-07-02 14:06:01 修改

阅读量810

点赞数 5

文章标签： vue.js javascript 前端

于 2024-07-02 11:48:17 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45444673/article/details/140122737

版权

vue自己手写的步骤条组件，市面上的都不喜欢，满足不了功能，自己手写了个

效果
在这里插入图片描述
代码

<!-- 步骤条组件 -->
<template>
  <div style="
  width: 100%;
  display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: space-around;">

    <div :class="singleDivClass(index , item)"
         @click="clickProgress(index, item)"
         v-for="(item,index) in progressList">{
  { item.name }}

      <!-- 箭头-->
      <div v-if="progressList.length - 1 !== index"
           style="display: inline-block;position: absolute;right: -25px;height: 40px;width: 40px; z-index: 10">
        <div style="width: 25px;height: 20px;background-color: white;transform: skewX(30deg);"></div>
        <div