封装progress组件

效果图

<template>
  <progress
    :style="cssVars"
    :value="value"
    class="progress"
    max="100"
  ></progress>
</template>
<script>
export default {
  name: "CtProgress",
  props: {
    value: {
      type: Number,
    },
    color: {
      type: String,
    },
    bgColor: {
      type: String,
    },
    height: {
      type: String,
    },
  },
  computed: {
    cssVars() {
      return {
        "--color": this.color,
        "--bg": this.bgColor,
        "--height": this.height,
      };
    },
  },
  created() {
    console.log(this);
  },
};
</script>
<style  lang="scss" scoped>
progress {
  border-radius: 6px;
  border-left: 6px var(--color) solid; //左边，已达到的百分比的颜色
  border-right: 6px var(--bg) solid; //右边，未达到的百分比的颜色
  background-color: var(--bg); //总体的背景色
  height: var(--height); //进度条的高度
}
progress::-webkit-progress-bar {
  background-color: var(--bg); //未达到的百分比的颜色
}
progress::-webkit-progress-value {
  background-color: var(--color); //value的百分比的颜色
}
</style>

 使用到了scss中使用变量 

使用计算属性定义定义cssVars 注意需要绑定样式到标签上 不然css中不能使用