[JavaScript知识库]vue---自定义进度条组件

效果图：

组件代码：

ProgressPlus.vue

<template>
  <div class="progress-plus" style="width: 100%">
    <div class="progress-box">
      <div class="gray" />
      <div class="colors" :style="setColor()" />
      <div class="icon icon1" />
      <div class="icon icon2" />
      <div class="icon icon3" />
      <div class="icon icon4" />
    </div>
    <span style="display: inline-block;padding-left: 5px" :style="{color:color}">{{ percent }}</span>
  </div>
</template>

<script>
export default {
  name: 'ProgressPlus',
  props: {
    color: {
      type: String,
      default: 'green'
    },
    percent: {
      type: Number,
      default: 0
    },
    width: {
      type: Number,
      default: 200
    }
  },
  methods: {
    setColor() {
      return {
        'background-color': this.color,
        'left': (this.percent - 100) + '%'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.progress-plus{
  display: flex;
  &>span{
    width: 50px;
  }
  .progress-box{
    display: inline-block;
    position: relative;
    overflow: hidden;
    flex: 1;
    &>div{
      width: 100%;
      height: 10px;
    }
    .gray{
      background-color: gray;
    }
    .colors{
      /*background-color: green;*/
      position: absolute;
      top: 0;
      transition: left 1s;
    }

    .icon{
      position: absolute;
      width: 2px;
      bottom: 0;
      top: 0;
      background-color: #2d364b;
      &.icon1{
        left: 20%;
      }
      &.icon2{
        left: 40%;
      }
      &.icon3{
        left: 60%;
      }
      &.icon4{
        left: 80%;
      }
    }
  }
}
</style>

使用方法：

import ProgressPlus from './components/ProgressPlus'

components: { ProgressPlus }

<progress-plus style="width: 200px" :color="'#ff4941'" :percent="50" />

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖