vue simpleStep 步骤条

根据 https://blog.csdn.net/CSDN877425287/article/details/113197605 博客所得

<template>
  <!--步骤条-组件-->
  <div id="step-group" :style="{'--height': totalHeight+unit,'--width':totalWidth+unit,'--stepBorderColor':stepBorderColor}">
    <div class="step-item" v-for="(item,index) in stepList"

         :class="{'current-step':currentStep-1>=index&&stepList.length-1!=index,
             'current-step-n':currentStep-1<index&&stepList.length-1!=index,
             'last-step':currentStep-1>=index&&stepList.length-1==index}"

         :style="{'--height': totalHeight+unit,'--itemWidth':itemWidth+unit,
             '--triangle':-totalHeight+unit,'--line':-totalHeight-lienWidth+unit,
              '--triangleBorder':totalHeight/2+unit,
              '--processingFontColor':processingFontColor,'--processingFontColorN':processingFontColorN,
              '--processingBackground':processingBackground,'--stepBackground':stepBackground,'--lienColor':lienColor
             }">

      {{item}}

    </div>


  </div>
</template>

<script>
  export default {
    name: "SimpleStepBar",
    data() {
      return {}
    },
    props: {
      totalWidth: {//步骤条总宽度
        type: Number,
        default: '75'
      },
      totalHeight: {//步骤条总高度
        type: Number,
        default: '3'
      },
      itemWidth: {//步骤项宽度
        type: Number,
        default: '25.56'
      },
      unit: {//单位
        type: String,
        default: 'rem'
      },
      stepList: {//步骤内容
        type: Array,
        default: ["步骤1", "步骤2", "步骤3"]
      },
      currentStep: {//当前步骤
        type: Number,
        default: 1
      },
      lienWidth: {//线条宽度
        type: Number,
        default: 0.1
      },
      stepBackground: {//步骤条背景色
        type: String,
        default: '#FFFFFF'
      },
      stepBorderColor: {//步骤边框色
        type: String,
        default: '#E0E0E0'
      },
      lienColor: {//线条颜色
        type: String,
        default: "#cccccc"
      },
      processingFontColor: {//进行中字体颜色
        type: String,
        default: '#FFFFFF'
      },
      processingFontColorN: {//未进行字体颜色
        type: String,
        default: '#767676'
      },
      processingBackground: {//进行中背景颜色
        type: String,
        default: '#1390EA'
      },


    },
  }
</script>

<style lang="scss" scoped>
  #step-group {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    margin-top: 1.63rem;
    width: var(--width);
    height: var(--height);
    display: flex;
    justify-content: flex-start;
    align-content: center;
    border: 1px var(--stepBorderColor) solid;
    border-radius: 4px;
    background: var(--stepBackground);

    .step-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: var(--itemWidth);
      height: var(--height);
      font-size: 1.25rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: var(--processingFontColorN);
      line-height: 1.75rem;
      letter-spacing: 1px;
      position: relative;
      background: var(--stepBackground);
    }

    .current-step {
      background: var(--processingBackground);
      color: var(--processingFontColor);
    }


    .current-step:before {
      position: absolute;
      right: var(--triangle);
      //right: -3rem;
      display: block;
      content: '';
      z-index: 12;
      border-right: var(--triangleBorder) solid transparent;
      border-top: var(--triangleBorder) solid transparent;
      border-bottom: var(--triangleBorder) solid transparent;
      border-left: var(--triangleBorder) solid var(--processingBackground);
    }

    .current-step:after {
      position: absolute;
      //right: -3.2rem;
      right: var(--line);
      top: 0rem;
      display: block;
      content: '';
      z-index: 10;

      border-right: var(--triangleBorder) solid transparent;
      border-top: var(--triangleBorder) solid transparent;
      border-bottom: var(--triangleBorder) solid transparent;
      border-left: var(--triangleBorder) solid var(--lienColor);
    }

    .current-step-n:before {
      position: absolute;
      //right: -3rem;
      right: var(--triangle);
      display: block;
      content: '';
      z-index: 12;
      border-right: var(--triangleBorder) solid transparent;
      border-top: var(--triangleBorder) solid transparent;
      border-bottom: var(--triangleBorder) solid transparent;
      border-left: var(--triangleBorder) solid var(--stepBackground);
    }

    .current-step-n:after {
      position: absolute;
      //right: -3.2rem;
      right: var(--line);
      top: 0rem;
      display: block;
      content: '';
      z-index: 10;
      border-right: var(--triangleBorder) solid transparent;
      border-top: var(--triangleBorder) solid transparent;
      border-bottom: var(--triangleBorder) solid transparent;
      border-left: var(--triangleBorder) solid var(--lienColor);

    }

    .last-step {
      background: var(--processingBackground);
      color: var(--processingFontColor);
    }
  }

</style>

用法

<simpleStep :totalWidth="1070" :totalHeight="54"
	:unit='"px"' :stepList="stepList" :currentStep="currentStep"
		 :itemWidth="356" :stepBackground="stepBackground"
		 :stepBorderColor="stepBorderColor" :processingBackground="processingBackground">
	</simpleStep>
	import simpleStep from '@/components/step-bar/step-bar'

记录一下，有备无患，哈哈