因為所在公司臨近年底突然宣布Game Over，導致我等小碼農又要踏上一個艱辛的求職道路了。才眨眼功夫，年就過完了，快樂的時光總是很匆忙呀。

開年的第一個面試，面試官問我會不會自己寫一個圓環進圖圈，這個我之前做過，緊張還是怎麽的，一時忘記當初怎麽寫的了還有點小尷尬呢。回到家自己又實現了一遍，現在把代碼貼出來，有需要的人可以參考一下，如果試用過，發現問題，歡迎留言告知，不勝感激。

效果如圖所示：

<template>
  <div class="percentloop">
    <div class="circle-left">

      <div ref="leftcontent"></div>
    </div>
    <div class="circle-right">
      <div ref="rightcontent"></div>
    </div>
    <div class="number">{{ percent }} %</div>
  </div>
</template>

<script>
export default {
  props: {
    percentNum: {
      type: [String, Number],
      default: 0
    }
  },
  data () {
    return {
      percent: this.percentNum,
      initDeg: 0
    }
  },
  methods: {
    goRotate (deg) {
      let timeId = setInterval(() => {
        if (Number(deg) === Number(this.initDeg)) {
          clearInterval(timeId)
        } else if (deg > this.initDeg) {
          this.initDeg += 1
          if (this.initDeg > 180) {
            this.$refs.rightcontent.style.transform = ‘rotate(‘ + (this.initDeg - 180) + ‘deg)‘
          } else {
            this.$refs.leftcontent.style.transform = ‘rotate(‘ + this.initDeg + ‘deg)‘
          }
        } else {
          this.initDeg -= 1
          if (this.initDeg >= 180) {
            this.$refs.rightcontent.style.transform = ‘rotate(‘ + (this.initDeg - 180) + ‘deg)‘
          } else {
            this.$refs.leftcontent.style.transform = ‘rotate(‘ + this.initDeg + ‘deg)‘
          }
        }
      }, 0)
    }
  },
  computed: {
    getDeg () {
      let deg = 0
      if (this.percent >= 100) {
        deg = 360
      } else {
        deg = parseInt(360 * this.percent / 100)
      }
      return deg
    }
  },
  mounted () {
    this.goRotate(this.getDeg)
  },
  watch: {
    ‘percentNum‘: function (val) {
      this.percent = val
      this.goRotate(this.getDeg)
    }
  }
}
</script>

<style scoped lang="scss">
.percentloop {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
      .circle-left, .circle-right {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background-color: red;
        overflow: hidden;
        &>div {
          width: 100%;
          height: 100%;
          background-color: #8a8a8a;
          transform-origin: right center;
          /*transition: all .5s linear;*/
        }
      }
      .circle-right {
        left: 50%;
        &>div {
          transform-origin: left center;
        }
      }
      .number {
        position: absolute;
        top: 9%;
        bottom: 9%;
        left: 9%;
        right: 9%;
        background-color: #fff;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
      }
    }
</style>

vue框架內實現圓環百分比進度條