[JavaScript知识库]CSS 进度条样式组件

?

?

?

<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,
      default: ''
    },
  },
  computed: {
    dotCount() {
      return this.percent < 0 ? 0 : (this.percent > 100 ? 25 : (this.percent > 50 ? Math.floor(this.percent / 100 * 25) : Math.ceil(this.percent / 100 * 25)));
    },
  },
}
</script>
<style lang="less" scoped>
.progress-wrap {
  display: inline-flex;
  align-items: center;
  min-width: 125px;
  background-color: #f8f8f8;
  border-radius: 2px;
  padding: 1px;
  border: 1px solid transparent;
  box-sizing: border-box;
  .progress-dot {
    width: 4px;
    height: 12px;
    border-radius: 3px;
    background-color: #1661ad;
    margin-right: 1px;
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>

父组件引用

import ProgressBar from '@/components/progress';

<progress-bar :percent="50" wrapColor="#1661AD" borderColor="#fff" dotColor="#fff" />

?