⼀起学Vue⾃定义组件之进度条
在⽇常开发中，随着需求的个性化，逻辑的复杂化，⾃定义组件也变得越来越常见，⽽且组件具有扩展性强，易复⽤，封装复杂的代码逻辑等优点，可以⽤⼩组件来构建⼤型应⽤系统。本⽂以⼀个简单的⼩例⼦，简述Vue进⾏组件开发的常见步骤，如有不⾜之处，还请指正。
涉及知识点
本⽂案例，不仅⽤到了之前的基础知识，如：v-if, 样式绑定，属性传值等，还⽤到了组件的特有知识，如下所⽰：
组件：可复⽤的Vue实例，具有封装，复⽤等特点。
Vue项⽬构建：⼀个vue后缀的⽂件，就表⽰⼀个组件。但是浏览器并不认识vue⽂件，所有需要进⾏编译才能运⾏，Vue提供了⼀个脚⼿架（CLI）来编译运⾏项⽬。
组件构成：由props(属性)，computed(计算属性),method(⽅法)等构成，来⽀持组件的不同需求。
开发⼯具：Visual Studio Code
运⾏⼯具：Vue CLI 运⾏命令：vue serve
设计思路
1. 进度条分类：线性进度条（采⽤DIV嵌套实现），环形进度条（采⽤SVG实现）。
2. 提取共性特征：颜⾊，⾼度，显⽰内容，图标样式等属性值的提取，根据属性来区分展⽰的，采⽤计算属性实现。
3. 图标样式：本例中的图标样式采⽤Wingdings字体实现，可通过windows-->附件-->字符映射表去查询。
⽰例效果图
线性进度条：分为进度显⽰在右侧，还是内侧且跟随进度条移动。如下所⽰：
环形进度条：⼤⼩可以设置，显⽰内容和线性进度条⼀致。如下所⽰：
核⼼代码
本例所有代码进⾏封装【Progress.vue】主要包含三部分：模板（template）脚本（script）样式（style）。
⼀个template下只能包含⼀个div，但是div下可以包含多个⼦节点。如下所⽰：
1<template>
2<div class="progress " :class="'progress--'+ptype">
3<!-- 条形进度条 -->
4<div class="progress-bar" v-if="ptype==='line'">
5<div class="progress-bar__outer" :>
6<div class="progress-bar__inner" :>
7<!-- 进度条内显⽰百分⽐ -->
8<div v-if="textInside" class="progress__text" > {{percentage}}% </div>
9</div>
10</div>
11
12</div>
13<!-- 环形进度条采⽤SVG实现 -->
14<div class="progress_circle" : v-else>
15<svg viewBox="0 0 100 100" :>
16<!-- 背景圆形 -->
17<path :d="trackPath" fill="none" :stroke-width="relativeStrokeHeight" stroke="#e5e9f2"/>
18<!-- 进度圆形 -->
19<path :d="trackPath" fill="none" :stroke-width="relativeStrokeHeight" :stroke="stroke" : stroke-linecap="round"/> 20</svg>
21</div>
22<div v-if="!textInside" class="progress__text" :>
23<template v-if="!status"> {{percentage}}% </template>
24<i v-else class="icon" :class="iconCls"></i>
25</div>
26</div>
27</template>
View Code
script部分，本例主要⽤到props，和computed，如下所⽰：
1 <script>
2 export default {
3    props:{
4        strokeHeight:{
5// 进度条⾼度
6// required:true,
7            type:Number,
8default:10
9        },
10        percentage:{
11// 进度条百分⽐
12            type:Number,
13default:0,
14            required:true,
15            valiator(value){
16return value>=0 && value<=100
17            },
18        },
19        status:{
20// 进度条状态：正常状态，成功状态，异常状态
21            type:String,
22
23        },
24        ptype:{
margin属性值可以为百分比25// 进度条样式：条形，还是圆形
26            type:String,
27default:'line',
28            validator:val=>['circle','line'].includes(val)
29        },
30        textInside:{
31// ⽂字是否內显
32            type:Boolean,
33default:false,
34        },
35        pcolor:{
36// 进度条颜⾊
37            type:String
38        },
39        cwidth:{
40            type:Number,
41default:126,
42        }
43    },
44    computed:{
45        progressTextSize(){
46return 9+this.strokeHeight*0.4;
47        },
48        stroke(){
49            let color;
50if(this.pcolor){
51return this.pcolor;
52            }
53switch(this.status){
54case 'success':
55                    color='#13ce66';
56break;
57case 'failure':
58                    color='#ff4949';
59break;
60default:
61                    color='#20a0ff';
62break;
63            }
64return color;
65        },
66        barStyle(){
67// 计算属性调⽤其他计算属性，必须加this关键字，否则不到
68return {width:this.percentage+'%',backgroundColor:this.stroke}
69        },
70        iconCls(){
71if( this.ptype ==='line'){
72// 如果是线性进度条
73return this.status ==='success'?'icon-circle-check':'icon-circle-close';
74            }else{
75return this.status ==='success'?'icon-check':'icon-close';
76            }
77        },
78        trackPath(){
79            const radius = lativeStrokeHeight/2;
80return '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(){
83return this.strokeHeight*100 / this.cwidth;
84        },
85        perimeter(){
86            const radius = lativeStrokeHeight/2;
87return 2*Math.PI*radius;
88        },
89        circlePathStyle(){
90            const perimeter = this.perimeter;
91return{
92                strokeDasharray:''+perimeter+'px,'+perimeter+'px',
93                strokeDashoffset:(1-this.percentage/100)*perimeter+'px',
94
95            }
96        }
97    }
98 }
99 </script>
View Code
style部分，本例使⽤了伪元素（::before）显⽰图标，如下所⽰：
1<style>
2    .progress{
3        margin: 10px;
4/* border: 1px solid #ffbbff; */
5    }
6    .progress-bar{
7        display:inline-block;
8        width: 98%;
9        box-sizing: border-box; /* 盒模型的⽅式 */
10        margin-right: -50px;
11        padding-right: 50px;
12    }
13    .progress-bar__outer{
14        width: 100%;
15        border-radius: 10px;
16        background-color: #ebeef5;
17    }
18    .progress-bar__inner{
19/* width: 60%; */
20        background-color: rebeccapurple;
21        border-radius: 10px;
22        height: 100%;
23        transition: width 0.6s ease;
24        text-align: right;
25        line-height: 80%;
26    }
27    .progress__text{
28        font-size: 12px;
29        margin-left: 6px;
30        display: inline-block;
31        vertical-align: middle;
32        margin-right: 5px;
33    }
34    .icon-circle-close,.icon-close{
35        font-family: 'Wingdings' !important;
36        color:red;
37    }
38    .icon-circle-check,.icon-check{
39        font-family: 'Wingdings' !important;
40        color:seagreen;
41    }
42
43    .icon-circle-close::before{
44        content: '\FD';
45    }
46    .icon-close::before{
47        content: '\FB';
48    }
49    .icon-circle-check::before{
50        content: '\FE';
51    }
52    .icon-check::before{
53        content: '\FC';
54    }
55
56    .progress_circle{
57/* 环形进度条 */
58    }
59    .progress--circle{
60        display: inline-block;
61        position: relative;
62    }
63
64    .progress--circle .progress__text{
65        position:absolute;
66        top:50%;
67        transform: translateY(-50%);
68        margin-left: 0px;
69        text-align: center;
70        width: 100%;
71    }
72
73</style>
View Code
组件调⽤源码
⾸先引⼊组件，并注册组件，如下所⽰：
1 <script>
2// 组件名称⼤⼩写敏感，不能和已经存在的HTML⾥⾯的控件同名，如果是驼峰形式，则可以⽤短横线的⽅式（如：d=progress）或者和名称保持⼀致
3 import dProgress from './Progress';
4 export default {
5  components:{
6    dProgress
7  },
8
9 }
10 </script>
View Code
然后进⾏调⽤即可，如下所⽰：
1<template>
2
3<div>
4<H2>线性进度条--百分⽐外显</H2>
5<dProgress :percentage="0"/>
6<dProgress :percentage="40" pcolor="orange"/>
7<dProgress :percentage="60" status="success"/>
8<dProgress :percentage="80" status="failure"/>
9<H2>线性进度条--百分⽐内显</H2>
10<dProgress :percentage="0" :text-inside="true" :stroke-height="16"/>
11<dProgress :percentage="40" :text-inside="true"  :stroke-height="16"/>
12<dProgress :percentage="60" status="success" :text-inside="true"  :stroke-height="16"/>
13<dProgress :percentage="80" status="failure" :text-inside="true"  :stroke-height="16"/>
14<h2>环形进度条</h2>
15<dProgress :percentage="0" ptype="circle"/>
16<dProgress :percentage="40" ptype="circle"/>
17<dProgress :percentage="60" ptype="circle" status="success"/>
18<dProgress :percentage="80" ptype="circle" status="failure"/>
19</div>
20</template>
View Code
如需本例完整代码，可以点击代码链接进⾏下载
备注
【曲⽟管】
作者：柳永[宋]
陇⾸云飞，江边⽇晚，烟波满⽬凭阑久。
⼀望关河萧索，千⾥清秋，忍凝眸？
杳杳神京，盈盈仙⼦，别来锦字终难偶。断雁⽆凭，冉冉飞下汀洲，思悠悠。
暗想当初，有多少、幽欢佳会，
岂知聚散难期，翻成⾬恨云愁？
阻追游。每登⼭临⽔，惹起平⽣⼼事，⼀场消黯，永⽇⽆⾔，却下层楼。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。