组件代码templateviewclasscircular-container:stylecontainerStyleviewclasscircular-arc-wrap:stylearcWrapStyleviewclasscircular-arc:stylearcStyle/viewtemplate v-ifisBgShowviewclasscircular-cap:stylebgStartCapStyle/viewviewclasscircular-cap:stylebgEndCapStyle/view/templatetemplate v-ifcurrentPercent 0viewclasscircular-cap:styleprogressStartCapStyle/viewviewclasscircular-cap:styleprogressEndCapStyle/view/template/viewtext v-iffontShowclasscircular-text:styletextStyle{{displayPercent}}%/textslot/slot/view/templatescriptexportdefault{name:LCircularProgress,props:{boxWidth:{type:Number,default:200},boxHeight:{type:Number,default:200},lineWidth:{type:Number,default:4},isBgShow:{type:Boolean,default:true},bgColor:{type:String,default:#CCCCCC},type:{type:String,default:circular},percent:{type:Number,default:0},progressColor:{type:String,default:#5677fc},gradualColor:{type:String,default:},fontShow:{type:Boolean,default:true},fontSize:{type:Number,default:12},fontColor:{type:String,default:#5677fc},duration:{type:Number,default:800}},data(){return{currentPercent:0,animationTimer:null}},computed:{containerStyle(){return{width:${this.boxWidth}px,height:${this.boxHeight}px}},arcWrapStyle(){return{width:${this.boxWidth}px,height:${this.boxWidth}px,transform:rotate(90deg),transformOrigin:center center}},textStyle(){return{fontSize:${this.fontSize}px,color:this.fontColor}},displayPercent(){returnMath.round(this.currentPercent)},normalizedPercent(){returnMath.max(0,Math.min(Number(this.percent)||0,100))},arcConfig(){if(this.typehalfCircular){return{start:180,sweep:180}}if(this.typelargeSemicircle){return{start:153,sweep:234}}return{start:-90,sweep:360}},progressDeg(){returnthis.arcConfig.sweep*this.currentPercent/100},progressEndColor(){returnthis.gradualColor||this.progressColor},arcStyle(){constbgDegthis.isBgShow?this.arcConfig.sweep:this.progressDegconstbgColorthis.isBgShow?this.bgColor:transparentconstmaskSizecalc(100% -${this.lineWidth}px)constbackgroundconic-gradient(from${this.arcConfig.start}deg,${this.progressColor}0deg,${this.progressEndColor}${this.progressDeg}deg,${bgColor}${this.progressDeg}deg,${bgColor}${bgDeg}deg, transparent${bgDeg}deg, transparent 360deg)return{width:${this.boxWidth}px,height:${this.boxWidth}px,background,-webkit-mask:radial-gradient(farthest-side, transparent${maskSize}, #000${maskSize}),mask:radial-gradient(farthest-side, transparent${maskSize}, #000${maskSize})}},bgStartCapStyle(){returnthis.getCapStyle(this.arcConfig.start,this.bgColor)},bgEndCapStyle(){returnthis.getCapStyle(this.arcConfig.startthis.arcConfig.sweep,this.bgColor)},progressStartCapStyle(){returnthis.getCapStyle(this.arcConfig.start,this.progressColor)},progressEndCapStyle(){returnthis.getCapStyle(this.arcConfig.startthis.progressDeg,this.progressEndColor)}},watch:{percent(){this.startAnimation(this.currentPercent,this.normalizedPercent)}},mounted(){this.startAnimation(0,this.normalizedPercent)},beforeUnmount(){this.clearAnimation()},methods:{clearAnimation(){if(this.animationTimer){clearTimeout(this.animationTimer)this.animationTimernull}},startAnimation(from,to){this.clearAnimation()constdurationNumber(this.duration)||0conststartTimeDate.now()if(duration0||fromto){this.currentPercenttothis.$emit(end,{percent:${Math.round(to)}%})return}conststep(){constprogressMath.min((Date.now()-startTime)/duration,1)consteasing1-Math.pow(1-progress,3)this.currentPercentfrom(to-from)*easingif(progress1){this.animationTimersetTimeout(step,16)}else{this.animationTimernullthis.currentPercenttothis.$emit(end,{percent:${Math.round(to)}%})}}step()},getCapStyle(angle,color){constradiusthis.boxWidth/2-this.lineWidth/2constradianangle*Math.PI/180constxthis.boxWidth/2radius*Math.sin(radian)constythis.boxWidth/2-radius*Math.cos(radian)return{width:${this.lineWidth}px,height:${this.lineWidth}px,left:${x}px,top:${y}px,background:color,transform:translate(-50%, -50%)}}}}/scriptstyle scoped.circular-container{position:relative;overflow:hidden;}.circular-arc-wrap{position:absolute;left:0;top:0;pointer-events:none;}.circular-arc{position:absolute;left:0;top:0;border-radius:50%;}.circular-cap{position:absolute;border-radius:50%;}.circular-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}/style组件使用progress-circle:percent66:fontShowfalsetypelargeSemicircle:lineWidth$getPx(30)gradualColor#FFFFFFprogressColor#70CDFFbgColor#6095f7:boxWidth$getPx(268):boxHeight$getPx(215)viewclasstextviewclasstext_tscroll-number:numberuserCwbNum.wentuo userCwbNum.chongci userCwbNum.baodi :fz66color#fff/textclassss所/text/viewviewclasstips适配院校/view/view/progress-circle效果图
