分段进度条组件

非组件封装的 demo

组件封装代码

目前能用版

tick-progress.vue

<template>
  <div class="progress-container" :style="{height: height / 100 +'rem'}">
    <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>
</template>

<script>
export default {
  props: {
    precent: {
      type: Number,
      default: 0
    },
    tickNum: {
      type: Number,
      default: 10
    },
    height: {
      type: Number,
      default: 16
    }
  },
  data () {
    return {

    }
  }
}
</script>

<style lang="scss" scoped>
.progress-container {
  $progress-whole-bg-color: #03091d;
  $progress-bg-color: #0a1c45;
  $progress-active-color: #1f8df2;
  $progress-spacing: 2px;
  // width: 400px;
  // height: 16px;
  width: 100%;
  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: $progress-spacing * 2;
      height: 100%;
      background-color: $progress-whole-bg-color;
      z-index: 99;
    }
  }
}
</style>

使用

<template>
	<TickProgress :precent="precent" :tickNum="10"></TickProgress>
</template>

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

封装报错版（还有点小问题没处理好）

sass 变量好像没法很好地与 css 变量结合（考虑是不是要把单位去掉了）

或者两倍用计算属性

<template>
  <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>
</template>

<script>
export default {
  props: {
    precent: {
      type: Number,
      default: 0
    },
    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: {
        height: this.height / 100 + 'rem',
        "--spacing": this.spacing,
        "--whole-bg-color": this.wholeBgColor,
        "--bg-color": this.bgColor,
        "--active-color": this.activeColor,
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.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%;
  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: $progress-spacing * 2;
      height: 100%;
      background-color: $progress-whole-bg-color;
      z-index: 99;
    }
  }
}
</style>