直播电商平台开发，环形进度条组件

<template><br>  <div class="content" ref="box"><br>    <svg<br>      :id="idStr"<br>      style="transform: rotate(-90deg)"<br>      :width="width"<br>      :height="width"<br>      xmlns="http://www.w3.org/2000/svg"<br>    ><br>      <linearGradient :id="`gradient-${id}`" gradientUnits="userSpaceOnUse"><br>        <stop<br>          v-for="(item, index) in gradientsColor"<br>          :key="index"<br>          :offset="item.offset"<br>          :stop-color="item.color"<br>        /><br>      </linearGradient><br>      <circle<br>        :r="(width-radius)/2"<br>        :cy="width/2"<br>        :cx="width/2"<br>        :stroke-width="radius"<br>        :stroke="backgroundColor"<br>        fill="none"<br>      /><br>      <circle<br>        v-if="gradientsColorShow"<br>        ref="$bar"<br>        :r="(width-radius)/2"<br>        :cy="width/2"<br>        :cx="width/2"<br>        :stroke="gradientsColor ? `url(#gradient-${id})` : barColor"<br>        :stroke-width="radius"<br>        :stroke-linecap="isRound ? 'round' : 'square'"<br>        :stroke-dasharray="(width-radius)*3.14"<br>        :stroke-dashoffset="dashoffsetValue"<br>        fill="none"<br>      /><br>    </svg><br>    <div class="center_text"><br>      <p v-if="!$slots.default" class="title">{{progress}}%</p><br>      <slot></slot><br>    </div><br>  </div><br></template><br><script><br>// import _ from "lodash";<br>export default {<br>  props: {<br>    widthPresent: {<br>      type: Number,<br>      default: 1<br>    },<br>    gradientsColor: {<br>      type: [Boolean, Array],<br>      default: false<br>    },<br>    radius: {<br>      type: [Number, String],<br>      default: 20<br>    }, // 进度条厚度<br>    progress: {<br>      type: [Number, String],<br>      default: 20<br>    }, // 进度条百分比<br>    barColor: {<br>      type: String,<br>      default: "#1890ff"<br>    }, // 进度条颜色<br>    backgroundColor: {<br>      type: String,<br>      default: "rgba(0,0,0,0.3)"<br>    }, // 背景颜色<br>    isAnimation: {<br>      // 是否是动画效果<br>      type: Boolean,<br>      default: true<br>    },<br>    isRound: {<br>      // 是否是圆形画笔<br>      type: Boolean,<br>      default: true<br>    },<br>    id: {<br>      // 组件的id，多组件共存时使用<br>      type: [String, Number],<br>      default: 1<br>    },<br>    duration: {<br>      // 整个动画时长<br>      type: [String, Number],<br>      default: 1000<br>    },<br>    delay: {<br>      // 延迟多久执行<br>      type: [String, Number],<br>      default: 200<br>    },<br>    timeFunction: {<br>      // 动画缓动函数<br>      type: String,<br>      default: "cubic-bezier(0.99, 0.01, 0.22, 0.94)"<br>    }<br>  },<br>  data() {<br>    return {<br>      width: 200,<br>      idStr: "",<br>      oldValue: 0<br>    };<br>  },<br>  computed: {<br>    gradientsColorShow: function() {<br>      return true;<br>    },<br>    dashoffsetValue: function() {<br>      const { isAnimation, width, radius, progress, oldValue } = this;<br>      return isAnimation<br>        ? ((width - radius) * 3.14 * (100 - oldValue)) / 100<br>        : ((width - radius) * 3.14 * (100 - progress)) / 100;<br>    }<br>  },<br>  watch: {<br>    id: function() {<br>      this.idStr = `circle_progress_keyframes_${this.id || 1}`;<br>    },<br>    progress: function(newData, oldData) {<br>      if (newData !== oldData) {<br>        this.oldValue = oldData;<br>        this.setAnimation();<br>      }<br>    }<br>  },<br>  mounted() {<br>    this.idStr = `circle_progress_keyframes_${this.id || 1}`;<br>    let self = this;<br>    this.setCircleWidth();<br>    this.setAnimation();<br>    // 此处不能使用window.onresize<br>    window.addEventListener("resize", function() {<br>      self.setCircleWidth();<br>      self.setAnimation(self);<br>    });<br>  },<br>  methods: {<br>    setCircleWidth() {<br>      const { widthPresent } = this;<br>      this.$nextTick(() => {<br>        let box = this.$refs.box;<br>        let width = box.clientWidth * widthPresent;<br>        let height = box.clientHeight * widthPresent;<br>        let cW = width > height ? height : width;<br>        this.width = cW;<br>      })<br>    },<br>    setAnimation() {<br>      let self = this;<br>      if (self.isAnimation) {<br>        // 重复定义判断<br>        if (document.getElementById(self.idStr)) {<br>          self.$refs.$bar.classList.remove(`circle_progress_bar${self.id}`);<br>        }<br>        this.$nextTick(() => {<br>          this.startAnimation();<br>        });<br>      }<br>    },<br>    startAnimation() {<br>      // 生成动画样式文件<br>      let style = document.createElement("style");<br>      style.id = this.idStr;<br>      style.type = "text/css";<br>      style.innerHTML = `<br>      @keyframes circle_progress_keyframes_name_${this.id} {<br>      from {stroke-dashoffset: ${((this.width - this.radius) *<br>        3.14 *<br>        (100 - this.oldValue)) /<br>        100}px;}<br>      to {stroke-dashoffset: ${((this.width - this.radius) *<br>        3.14 *<br>        (100 - this.progress)) /<br>        100}px;}}<br>      .circle_progress_bar${<br>        this.id<br>      } {animation: circle_progress_keyframes_name_${this.id} ${<br>        this.duration<br>      }ms ${this.delay}ms ${this.timeFunction} forwards;}`;<br>      // 添加新样式文件<br>      document.getElementsByTagName("head")[0].appendChild(style);<br>      // 往svg元素中添加动画class<br>      this.$refs.$bar.classList.add(`circle_progress_bar${this.id}`);<br>    }<br>  }<br>};<br></script><br><style  scoped><br>.content {<br>  height: 100%;<br>  display: flex;<br>  justify-content: center;<br>  align-items: center;<br>}<br>.center_text {<br>  position: absolute;<br>  font-size: 16px;<br>  font-weight: bold;<br>}<br></style>