iview中的i-circle宽度自适应

页面部分

<i-circle 
  :percent=maintenanceRateCount.nowYearOrderPercentage
  //控制大小
  :size=circleWidth
  stroke-linecap="square"
  stroke-color="#2562e9"
  trail-color="#002251"
>
  <span class="demo-Circle-inner">{{maintenanceRateCount.nowYearOrderPercentage}}%</span>
</i-circle>

data
这里一定要给一个初始值

data(){
	return{
		circleWidth: window.innerHeight/100*6.2
	}
}

mounted

mounted() {
  window.onresize = () => {
       return (() => {
           this.circleWidth = window.innerHeight/100*6.2
       })()
   }
}

watch 去监听circleWidth的变化

watch:{
    circleWidth(newVal, oldVal){
        this.circleWidth = newVal
    }
}

methods

getCircleWidth(){
   this.circleWidth = window.innerHeight/100*6.2
}