CSS 进度条样式组件

黎轩栀海

已于 2022-04-01 11:51:02 修改

阅读量1.1k

点赞数 1

分类专栏： # CSS 文章标签： css3 前端 css html vue.js

于 2022-03-22 14:01:24 首次发布

本文链接：https://blog.csdn.net/yuan_jlj/article/details/123659040

版权

<template>
  <div>
    <div class="progress-wrap" :style="{backgroundColor:wrapColor,borderColor:borderColor}">
    <div class="progress-dot" :style="{opacity:i / dotCount,backgroundColor:dotColor}" v-for="i in dotCount" :key="i"></div>
  </div>{
  {percent}}%
  </div>
</template>

<script>
export default {
  props: {
    percent: {
      type: Number,
      default: 0
    },
    wrapColor: {
      type: String,
      default: ''
    },
    borderColor: {
      type: String,
      default: ''
    },
    dotColor: {
      type: String,
      defau