1 <script>
 2 export default {
 3     props:{
 4         strokeHeight:{
 5             // 進(jìn)度條高度
 6             // required:true,
 7             type:Number,
 8             default:10
 9         },
10         percentage:{
11             // 進(jìn)度條百分比
12             type:Number,
13             default:0,
14             required:true,
15             valiator(value){
16                 return value>=0 && value<=100
17             },
18         },
19         status:{
20             // 進(jìn)度條狀態(tài)：正常狀態(tài)，成功狀態(tài)，異常狀態(tài)
21             type:String,
22 
23         },
24         ptype:{
25             // 進(jìn)度條樣式：條形，還是圓形
26             type:String,
27             default:'line',
28             validator:val=>['circle','line'].includes(val)
29         },
30         textInside:{
31             // 文字是否內(nèi)顯
32             type:Boolean,
33             default:false,
34         },
35         pcolor:{
36             // 進(jìn)度條顏色
37             type:String
38         },
39         cwidth:{
40             type:Number,
41             default:126,
42         }
43     },
44     computed:{
45         progressTextSize(){
46             return 9+this.strokeHeight*0.4;
47         },
48         stroke(){
49             let color;
50             if(this.pcolor){
51                 return this.pcolor;
52             }
53             switch(this.status){
54                 case 'success':
55                     color='#13ce66';
56                     break;
57                 case 'failure':
58                     color='#ff4949';
59                     break;
60                 default:
61                     color='#20a0ff';
62                     break;
63             }
64             return color;
65         },
66         barStyle(){
67             // 計(jì)算屬性調(diào)用其他計(jì)算屬性，必須加this關(guān)鍵字，否則找不到
68             return {width:this.percentage+'%',backgroundColor:this.stroke}
69         },
70         iconCls(){
71             if( this.ptype ==='line'){
72                 // 如果是線性進(jìn)度條
73                 return this.status ==='success'?'icon-circle-check':'icon-circle-close';
74             }else{
75                 return this.status ==='success'?'icon-check':'icon-close';
76             }
77         },
78         trackPath(){
79             const radius = 50-this.relativeStrokeHeight/2;
80             return 'M 50 50 m 0 -'+radius+' a '+radius+' '+radius+' 0 1 1 0 '+radius*2+' a '+radius+' '+radius+' 0 1 1 0 -'+radius*2+' ' ; 
81         },
82         relativeStrokeHeight(){
83             return this.strokeHeight*100 / this.cwidth;
84         },
85         perimeter(){
86             const radius = 50-this.relativeStrokeHeight/2;
87             return 2*Math.PI*radius;
88         },
89         circlePathStyle(){
90             const perimeter = this.perimeter;
91             return{
92                 strokeDasharray:''+perimeter+'px,'+perimeter+'px',
93                 strokeDashoffset:(1-this.percentage/100)*perimeter+'px',
94 
95             }
96         }
97     }
98 }
99 </script>