标签：bg 分段 进度条 color 100% spacing height 组件 progress

非组件封装的 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>

标签：bg,分段,进度条,color,100%,spacing,height,组件,progress
来源： https://www.cnblogs.com/suwanbin/p/16683714.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。