vue 自定义进度条

index.vue

<template>
  <div>
    <Steps :stepInfo="stepInfo">
      <template slot="temp">
        <StepsT v-for="(item, index) in stepInfo.list" :key="index" :index="index" :stepInfo="stepInfo">
          <template slot="topTitle">
            {{ item.name }}
          </template>
          <template slot="bottomTitle">
            <div>计划开始：{{ item.startTime }}</div>
          </template>
          <template slot="bottomTitle">
            <div>实际开始：{{ item.endTime }}</div>
          </template>
        </StepsT>
      </template>
    </Steps>
  </div>  
</template>

 
<script>
import Steps from './stepsTemp.vue'
import StepsT from './stepsTemps.vue'
export default {
  components: { Steps, StepsT },
  data() {
    return {
      stepInfo: {
        list: [{
          name: '基础施工',
          startTime: '2021.03.30',
          endTime: '2021.03.30',
        },{
          name: '主体施工',
          startTime: '2021.03.30',
          endTime: '2021.03.30',
        },{
          name: '二次结构',
          startTime: '2021.03.30',
          endTime: '2021.03.30',
        },{
          name: '装饰工程',
          startTime: '2021.03.30',
          endTime: '2021.03.30',
        }],
        step: 2
      }
    }
  },
  mounted() {},
  methods: {}
}
</script>

 
<style scoped lang="scss">
</style>

stepsTemp.vue

<template>
  <div class="stepBox">
    <div class="stepOut">
      <ul class="stepOutBox">
        <slot name="temp"></slot>
      </ul>
    </div>
  </div>
</template>

 
<script>
export default {
  props: {},
  data() {
    return {}
  },
  mounted() {},
  methods: {}
}
</script>

 
<style scoped lang="scss">
// 设置滚动条的样式
// 滚动条宽高
.stepBox::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
// 滚动条滑块
.stepBox::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #ccc;
}
// 滚动条背景
.stepBox::-webkit-scrollbar-track-piece {
  background: #808488;
  border-radius: 10px;
}
.stepBox::-webkit-scrollbar-button {
  display: none;
}
.stepBox {
  width: 600px;
  overflow: auto;
  user-select:none;
  .stepOut {
    // width: 100%;
    // height: 70px;
    display: flex;
    // justify-content: center;
    margin: 60px 0;
    .stepOutBox {
      display: flex;
      position: relative;
      margin: 0;
      padding: 0;
      // width: 100%;
    }
  }
}
</style>

stepsTemps.vue

<template>
  <!-- <li class="stepItem" :style="'width: ' + 100 / stepInfo.list.length + '%'"> -->
  <li class="stepItem">
    <div v-if="index === 0" :class="stepInfo.step <= 0 ? 'nullLine leftLine' : 'nullLine leftLine active'"></div>
    <div v-if="index === stepInfo.list.length - 1" :class="stepInfo.step >= stepInfo.list.length ? 'nullLine rightLine active' : 'nullLine rightLine'"></div>
    <div class="topTitle">
      <slot name="topTitle"></slot>
    </div>
    <div class="reRound icon">
      <div class="maxRound"></div>
      <div :class="stepInfo.step >= index + 1 ? 'minRound active':'minRound'"></div>
    </div>
    <div :class="stepInfo.step >= index + 2 ? 'line active' : 'line'" v-if="index!==stepInfo.list.length - 1"></div>
    <div class="diamond">
      <img src="./diamond.png" alt="">
    </div>
    <div class="stepStatus">
      <slot name="bottomTitle"></slot>
    </div>
  </li>
</template>
 
<script>
export default {
  props: {
    // 传递步骤参数
    stepInfo: {
      type: Object,
      default: function () {
        return {
          list: [],
          step: 0
        }
      }
    },
    index: { type: Number, default: '' }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {}
}
</script>

 
<style scoped lang="scss">
.reRound {
  position: relative;
  .maxRound {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1px solid #3681FF;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #0a0d2c;
  }
  .minRound {
    width: 9px;
    height: 9px;
    background: #FF8417;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
}
.stepOut {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: center;
  margin: 40px 0;
  .stepOutBox {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    .nullLine {
      position: absolute;
      top: 4%;
      // transform: translate(-50%, -50%);
      width: 37%;
      height: 8px;
      z-index: 111;
      background: #FF8417;
    }
    .leftLine {
      left: 10%;
      // background: #7AB2FF;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
    }
    .rightLine {
      right: 10%;
      // background: #FF8417;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
    }
    .active {
      background-color: #7AB2FF!important;
    }
    .stepItem {
      width: 200px;
      height: 70px;
      float: left;
      font-size: 16px;
      text-align: center;
      position: relative;
      list-style: none;
      .topTitle {
        // position: absolute;
        // left: 50%;
        // top: -30px;
        // transform: translate(-50%, -50%);
        // font-weight: bold;
        position: absolute;
        left: 50%;
        top: -20px;
        transform: translate(-50%, -50%);
        font-size: 16px;
      }
      .icon {
        // width: 13px;
        height: 13px;
        // border-radius: 50%;
        // background: #FF8417;
        margin: 0 auto;
        position: relative;
        z-index: 888;
      }
      .line {
        position: absolute;
        top: 3px;
        left: 53%;
        width: 94%;
        height: 8px;
        background: #FF8417;
        z-index: 111;
      }
      .stepStatus {
        font-size: 12px;
      }
      .diamond {
        margin: 14px 0;
        img {
          width: 8px;
        }
      }
    }
  }
}
</style>