基于Vue，实现圆形进度条

最新推荐文章于 2024-05-21 09:38:48 发布

大刘鸭

最新推荐文章于 2024-05-21 09:38:48 发布

阅读量1.9k

点赞数

分类专栏： css JavaScript Vue 文章标签： vue.js css3 javascript 进度条圆形进度条

本文链接：https://blog.csdn.net/xiao_yu_liu/article/details/124823574

版权

JavaScript 同时被 3 个专栏收录

50 篇文章 0 订阅

订阅专栏

Vue

21 篇文章 1 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

<template>
  <div class="circle-progress">
    <div class="left-wrap wrap">
      <div :style="leftStyle" class="circle-left circle"></div>
    </div>
    <div class="right-wrap wrap">
      <div :style="rightStyle" class="circle-right circle"></div>
    </div>
    <div v-if="showPersent" class="base">{{ size }}%</div>
  </div>
</template>
<script>
export default {
  props: {
    showPersent: {
      default: false,
      type: Boolean,
    },
    color: {
      type: String,
      required: true,
    },
    size: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      defalutLeftDeg: -225,
      defaultRightDeg: -315,
    };
  },
  computed: {
    leftStyle() {
      let { size } = this;
      size = size || 0;
      let degNum = 0;
      if (size > 50) {
        size -= 50;
      } else {
        size = 0;
      }
      degNum = this.defalutLeftDeg + (size / 100) * 360;
      return {
        transform: `rotate(${degNum}deg)`,
        "border-top-color": this.color,
        "border-left-color": this.color,
      };
    },
    rightStyle() {
      let { size } = this;
      size = size || 0;
      let degNum = 0;
      if (size > 50) {
        size = 50;
      }
      degNum = this.defaultRightDeg + (size / 100) * 360;
      return {
        transform: `rotate(${degNum}deg)`,
        "border-top-color": this.color,
        "border-right-color": this.color,
      };
    },
  },
};
</script>
<style>
div {
  box-sizing: border-box;
}

.circle-progress {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  overflow: hidden;
  z-index: 9;
  width: 50%;
}

.left-wrap {
  left: 0;
}

.right-wrap {
  right: 0;
  transform: rotate(180deg);
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid;
}

.circle-left {
  border-bottom-color: transparent;
  border-right-color: transparent;
}

.circle-right {
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
}

.base {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
</style>