vue 分段进度条组件

分段进度条组件

非组件封装的 demo

组件封装代码

./components/tick-progress.vue

<template>
  <div class="container">
    <div class="progress-container" :style="styleObj">
      <div class="progress" :style="{width: precent+'%'}"></div>
      <div class="progress-bg"></div>
      <div class="progress-tick-container">
        <div class="progress-tick" v-for="(item, index) in (new Array(tickNum))" :key="'tick' + index"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 进度条占值百分比
    precent: {
      type: Number,
      // default: 0
      default: 30
    },
    height: {
      type: Number,
      default: 16
    },
    // 间距
    spacing: {
      type: String,
      default: "2px"
    },
    // 进度条整体背景色
    wholeBgColor: {
      type: String,
      default: "#03091d"
    },
    // 进度条背景色
    bgColor: {
      type: String,
      default: "#0a1c45"
    },
    // 进度条有效值颜色
    activeColor: {
      type: String,
      default: "#1f8df2"
    }
  },
  data() {
    return {
      tickNum: 10,
      styleObj: {}
    };
  },
  mounted() {
    this.styleObj = {
      height: this.height / 100 + "rem",
      // height: this.height + "px",
      "--spacing": this.spacing,
      "--whole-bg-color": this.wholeBgColor,
      "--bg-color": this.bgColor,
      "--active-color": this.activeColor
    };
  },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
#app {
  width: 100vw;
  height: 100vh;
  background-color: #010f3f33;
  display: flex;
  align-items: center;
  justify-content: center;
}
html {
  font-size: 100px;
}
body {
  font-size: 16px;
}

div.container {
  width: 400px;
  // height: 16px;
}
.progress-container {
  $progress-spacing: var(--spacing, 2px);
  $progress-whole-bg-color: var(--whole-bg-color, #03091d);
  $progress-bg-color: var(--whole-bg-color, #0a1c45);
  $progress-active-color: var(--active-color, #1f8df2);
  width: 100%;
  // width: 400px;
  background-color: $progress-whole-bg-color;
  border: 1px solid $progress-bg-color;
  position: relative;
  padding: $progress-spacing;
  // box-sizing: border-box;
  .progress {
    position: absolute;
    left: $progress-spacing;
    top: $progress-spacing;
    max-width: calc(100% - (#{$progress-spacing} * 2));
    height: calc(100% - (#{$progress-spacing} * 2));
    background-color: $progress-active-color;
    z-index: 9;
  }
  .progress-bg {
    background-color: $progress-bg-color;
    position: absolute;
    left: $progress-spacing;
    top: $progress-spacing;
    width: calc(100% - (#{$progress-spacing} * 2));
    height: calc(100% - (#{$progress-spacing} * 2));
    z-index: 1;
  }
  .progress-tick-container {
    width: calc(100% - (#{$progress-spacing} * 2));
    height: calc(100% - (#{$progress-spacing} * 2));
    position: absolute;
    left: $progress-spacing;
    top: $progress-spacing;
    display: flex;
    justify-content: space-evenly;
    .progress-tick {
      width: calc(#{$progress-spacing} * 2);
      height: 100%;
      background-color: $progress-whole-bg-color;
      z-index: 99;
    }
  }
}
</style>

使用

<template>
	<TickProgress :precent="precent"></TickProgress>
	<TickProgress :precent="62" :tickNum="5"></TickProgress>
	<TickProgress :precent="62" :activeColor="rgb(252,198,44)"></TickProgress>
</template>

<script>
import TickProgress from "./components/tick-progress.vue"
export default {
  components: { TickProgress },
  data () {
    return {
      precent: 30
    }
  }
}
</script>

参考博客：

• scss—在calc中使用变量