vue--圆形进度条组件

参考文档

https://segmentfault.com/a/1190000012655551?utm_source=tag-newest

自己定义

1、还有许多细节要继续完善
2、偶尔还会更新此文档

<template>
  <div class="progress-circle">
    <div class="circle" ref="circle">
      <div class="circle-left" :style="percent<= 50? circleLeft : circleLeft_R"></div>
      <div class="circle-right" :style="percent<= 50? '': circleRight"></div>
      <!-- 遮罩层，显示百分比 -->
      <div class="show-persent">
        <span class="persent">{{percent}}%</span>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "ProgressCircle",
      data(){
        return{
          percent: 69.3  //百分比
        }
      },
      props: {
        width: { //外圆的宽度
          type: String,
          default: '100px'
        }
      },
      created(){
      },
      mounted(){

      },
      computed:{
        styles(){
          return{
            width: this.width,
            height: this.width,
          }
        },
        circleLeft(){
          return{
            transform: "rotate(" + (this.percent * 3.6) + "deg)"
          }
        },
        circleLeft_R(){
          return{
            backgroundColor: '#000',
            transform: "rotate(0deg)"
          }
        },
        circleRight(){
          return{
            transform: "rotate(" + (this.percent * 3.6) + "deg)"
          }
        }
      }
    }
</script>

<style scoped lang="scss">
  .progress-circle{
    .circle{
      position: relative;
      font-size: 100px;
      width: 1em;
      height: 1em;
      background-color: #333;
      border-radius: 50%;
      *{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin:auto;
      }
      .circle-left, .circle-right{
        border-radius: 50%;
        width: 1em;
        height: 1em;
      }
      .circle-right{
        clip: rect(0, 0.5em, auto, 0);
        background-color: red;
      }
      .circle-left{
        clip: rect(0,auto, auto, 0.5em);
        background-color: green;
      }

      .show-persent{
        border-radius: 50%;
        width: 0.8em;
        height: 0.8em;
        background-color: #fff;
        text-align: center;
        line-height: 0.2em;
        color: #fff;
        .persent{
          font-size: 0.3em;
          height: 0.8em;
          line-height: 0.8em;
          display: block;
          color: #000;
        }
      }
    }
  }
</style>