vux中 XCircle组件渐变 一个页面 多次复用 后面 颜色渐变默认都是第一个 如何修复呢？

修复后 效果 如下图

 

我们该如何 修复呢？且看下文

1.修改源码

<template>
  <div class="vux-circle">
    <svg viewBox="0 0 100 100">
      <defs v-if="isGradient">
        <linearGradient :id='id' x1="10%" y1="45%" x2="50%" y2="0%">
          <stop offset="0%" :style="{'stop-color': strokeColor[0], 'stop-opacity': 1}"/>
          <stop offset="100%" :style="{'stop-color': strokeColor[1], 'stop-opacity': 1}"/>
        </linearGradient>
      </defs>
      <path :d="pathString"
        :stroke="trailColor"
        :stroke-width="trailWidth"
        :fill-opacity="0"/>
      <path :d="pathString"
        :stroke-linecap="strokeLinecap"
        :stroke="isGradient ? url : strokeColor"
        :stroke-width="strokeWidth"
        fill-opacity="0" :style="pathStyle"/>
    </svg>
    <div class="vux-circle-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
/**
* Fork from https://github.com/react-component/progress
* MIT license
*/

export default {
  name: 'x-circle',
  props: {
    strokeWidth: {
      type: Number,
      default: 1
    },
    strokeColor: {
      type: [Array, String],
      default: '#3FC7FA'
    },
    trailWidth: {
      type: Number,
      default: 1
    },
    trailColor: {
      type: String,
      default: '#D9D9D9'
    },
    percent: {
      type: Number,
      default: 0
    },
    strokeLinecap: {
      type: String,
      default: 'round'
    },
    anticlockwise: {
      type: Boolean,
      default: false
    },
    id : {
      type: String,
      default: 'vux-circle-gradient'
    }
  },
  computed: {
    url(){
      return 'url(#'+this.id+')'
    },
    radius () {
      return 50 - this.strokeWidth / 2
    },
    pathString () {
      return `M 50,50 m 0,-${this.radius}
      a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
      a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`
    },
    len () {
      return Math.PI * 2 * this.radius
    },
    pathStyle () {
      return {
        'stroke-dasharray': `${this.len}px ${this.len}px`,
        'stroke-dashoffset': `${((this.anticlockwise ? this.percent - 100 : 100 - this.percent) / 100 * this.len)}px`,
        'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
      }
    },
    isGradient () {
      return typeof this.strokeColor !== 'string'
    }
  }
}
</script>

<style>
.vux-circle {
  position: relative;
  width: 100%;
  height: 100%;
}
.vux-circle-content {
  width: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
</style>
 

2.如何运用

                   <template>
                        <div class="vux-circle-demo">
                            <div>
                                <x-circle
                                    :id='percent11'
                                    :percent="percent1"
                                    :stroke-width="6"
                                    :trail-width="6"
                                    :stroke-color="['#5ae0cf', '#58a3e1']"
                                    trail-color="#ececec">
                                </x-circle>
                            </div>
                        </div>
                   </template>

 

然后在 data初始化数据的时候 给 percent11  一个初始化（字符串 ）数据  这个随便 你定义  就可以了