vue 步骤条

效果图

<template>
   <!--  -->
   <div class='stepBar' v-if="list">
      <dl>
         <dd v-for="(item, index) in list" :key="index" :class="{ actafter: index + 1 <= selected }" class="al">
            <div class="round" :class="{ act: index + 1 <= selected }">{{ index + 1 }}</div>
            <div class="text" :class="{ acttext: index + 1 <= selected }" >
               <div class="borderText" >
                  <span class="textpe" v-if="item.type == 1"> {{ item.name }}</span>
                  <span class="texttype" v-if="item.type == 2"> {{ item.name }}</span>
              </div>
              <div class="tip" v-if="item.type == 2">
                  <span  v-for="(items,i) in item.chan" :key="i">{{ items.name }}</span>
               </div>
            </div>
         </dd>
      </dl>
   </div>
</template>
<script>
export default {
   name: 'stepBar',
   props: {
      list: {
         typeof: Array,
         default: () =>
            [
               {
                  type: 2, name: '步骤基本1', chan: [
                     { name: '双方基本信息' },
                     { name: '双方基本信息2' },
                  ]
               },
               { type: 1, name: '步骤基本2' },
               { type: 1, name: '步骤基本3' },
               { type: 1, name: '步骤基本4' }
            ]
      },
      selected: {
         typeof: Number, String,
         default: 2
      },
   },
   components: {},
   data() {
      return {
      };
   },
   computed: {
      // 主体设置
   },
   watch: {},
   methods: {
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
   },
   beforeCreate() { }, //生命周期 - 创建之前
   beforeMount() { }, //生命周期 - 挂载之前
   beforeUpdate() { }, //生命周期 - 更新之前
   updated() { }, //生命周期 - 更新之后
   beforeDestroy() { }, //生命周期 - 销毁之前
   destroyed() { }, //生命周期 - 销毁完成
   activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style  scoped lang="less">
dl,
dd {
   margin: 0;
   padding: 0;
}

.stepBar {
   position: relative;

   dl {
      display: flex;
      position: relative;

      dd {
         position: relative;
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;

         .round {
            position: relative;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #b0bfd2;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 12px;
            z-index: 1;
            box-shadow: 0px 12px 16px rgba(0, 0, 0, 0.3);
         }

         .text {
            margin: 8px 0px;
            font-size: 14px;
            position: relative;
         }
         .borderText{
            display: flex;
            justify-content: center;
         }
         .texttype {
            position: relative;
            margin: 5px 0px;
         }
         .textpe {
            position: relative;
            margin: 27px 0px;
         }

         .texttype::before {
            content: "";
            display: inline-block;
            width: 20%;
            height: 100%;
            border-top: 1px dashed #bcd5f2;
            border-left: 1px dashed #bcd5f2;
            position: absolute;
            left: -32%;
            top: 50%;
         }

         .texttype::after {
            content: "";
            display: inline-block;
            width: 20%;
            height: 100%;
            border-top: 1px dashed #bcd5f2;
            border-right: 1px dashed #bcd5f2;
            position: absolute;
            right: -32%;
            top: 50%;

         }
         
         .tip{
            position: relative;
            span{
               position: relative;
               display: inline-block;
               margin: 0px 10px;
               font-size: 12px;
            }
            span:first-child::after {
               content: '';
               position: absolute;
               border-style: solid;
               border-color: transparent;
               border-width: 3px 0 3px 5px;
               border-left-color: #2971c9;
               right: -13px;
               top: 5px;
            }
         }
      }

      .al::after {
         position: absolute;
         content: '';
         top: 8px;
         left: 0;
         width: 100%;
         height: 5px;
         background-color: #bcd5f2;
      }

      .al:first-child::after {
         left: 50%;
      }

      .al:last-child::after {
         width: 50%;
      }

      .actafter::after {
         background-color: #2971c9 !important;
      }

      .act {
         background-color: #2971c9 !important;
         box-shadow: 0px 12px 16px rgba(41, 113, 201, 0.3) !important;
      }

      .acttext {
         color: #2971c9 !important;
      }

   }
}</style>