在日常开发中,随着需求的个性化,逻辑的复杂化,自定义组件也变得越来越常见,而且组件具有扩展性强,易复用,封装复杂的代码逻辑等优点,可以用小组件来构建大型应用系统。本文以一个简单的小例子,简述Vue进行组件开发的常见步骤,如有不足之处,还请指正。
涉及知识点
本文案例,不仅用到了之前的基础知识,如:v-if, 样式绑定,属性传值等,还用到了组件的特有知识,如下所示:
- 组件:可复用的Vue实例,具有封装,复用等特点。
- Vue项目构建:一个vue后缀的文件,就表示一个组件。但是浏览器并不认识vue文件,所有需要进行编译才能运行,Vue提供了一个脚手架(CLI)来编译运行项目。
- 组件构成:由props(属性),computed(计算属性),method(方法)等构成,来支持组件的不同需求。
- 开发工具:Visual Studio Code
- 运行工具:Vue CLI 运行命令:vue serve
设计思路
- 进度条分类:线性进度条(采用DIV嵌套实现),环形进度条(采用SVG实现)。
- 提取共性特征:颜色,高度,显示内容,图标样式等属性值的提取,根据属性来区分展示的,采用计算属性实现。
- 图标样式:本例中的图标样式采用Wingdings字体实现,可通过windows-->附件-->字符映射表 去查询。
示例效果图
线性进度条:分为进度显示在右侧,还是内侧且跟随进度条移动。如下所示:
环形进度条:大小可以设置,显示内容和线性进度条一致。如下所示:
核心代码
本例所有代码进行封装【Progress.vue】主要包含三部分:模板(template)脚本(script)样式(style)。
一个template下只能包含一个div,但是div下可以包含多个子节点。如下所示:
<template>
<div class="progress " :class="'progress--'+ptype">
<!-- 条形进度条 -->
<div class="progress-bar" v-if="ptype==='line'">
<div class="progress-bar__outer" :style="{height:strokeHeight+'px'}">
<div class="progress-bar__inner" :style="barStyle">
<!-- 进度条内显示百分比 -->
<div v-if="textInside" class="progress__text" style="color:white;"> {{percentage}}% </div>
</div>
</div>
</div>
<!-- 环形进度条 采用SVG实现 -->
<div class="progress_circle" :style="{width:cwidth+'px',height:cwidth+'px'}" v-else>
<svg viewBox="0 0 100 100" :style="{width:cwidth+'px',height:cwidth+'px'}">
<!-- 背景圆形 -->
<path :d="trackPath" fill="none" :stroke-width="relativeStrokeHeight" stroke="#e5e9f2" />
<!-- 进度圆形 -->
<path :d="trackPath" fill="none" :stroke-width="relativeStrokeHeight" :stroke="stroke" :style="circlePathStyle" stroke-linecap="round" />
</svg>
</div>
<div v-if="!textInside" class="progress__text" :style="{fontSize:progressTextSize+'px'}">
<template v-if="!status"> {{percentage}}% </template>
<i v-else class="icon" :class="iconCls"></i>
</div>
</div>
</template>
script部分,本例主要用到props,和computed,如下所示:
<script>
export default {
props:{
strokeHeight:{
// 进度条高度
// required:true,
type:Number,
default:10
},
percentage:{
// 进度条百分比
type:Number,
default:0,
required:true,
valiator(value){
return value>=0 && value<=100
},
},
status:{
// 进度条状态:正常状态,成功状态,异常状态
type:String,
},
ptype:{
// 进度条样式:条形,还是圆形
type:String,
default:'line',
validator:val=>['circle','line'].includes(val)
},
textInside:{
// 文字是否內显
type:Boolean,
default:false,
},
pcolor:{
// 进度条颜色
type:String
},
cwidth:{
type:Number,
default:126,
}
},
computed:{
progressTextSize(){
return 9+this.strokeHeight*0.4;
},
stroke(){
let color;
if(this.pcolor){
return this.pcolor;
}
switch(this.status){
case 'success':
color='#13ce66';
break;
case 'failure':
color='#ff4949';
break;
default:
color='#20a0ff';
break;
}
return color;
},
barStyle(){
// 计算属性调用其他计算属性,必须加this关键字,否则找不到
return {width:this.percentage+'%',backgroundColor:this.stroke}
},
iconCls(){
if( this.ptype ==='line'){
// 如果是线性进度条
return this.status ==='success'?'icon-circle-check':'icon-circle-close';
}else{
return this.status ==='success'?'icon-check':'icon-close';
}
},
trackPath(){
const radius = 50-this.relativeStrokeHeight/2;
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+' ' ;
},
relativeStrokeHeight(){
return this.strokeHeight*100 / this.cwidth;
},
perimeter(){
const radius = 50-this.relativeStrokeHeight/2;
return 2*Math.PI*radius;
},
circlePathStyle(){
const perimeter = this.perimeter;
return{
strokeDasharray:''+perimeter+'px,'+perimeter+'px',
strokeDashoffset:(1-this.percentage/100)*perimeter+'px',
}
}
}
}
</script>
style部分,本例使用了伪元素(::before)显示图标,如下所示:
<style>
.progress{
margin: 10px;
/* border: 1px solid #ffbbff; */
}
.progress-bar{
display:inline-block;
width: 98%;
box-sizing: border-box; /* 盒模型的方式 */
margin-right: -50px;
padding-right: 50px;
}
.progress-bar__outer{
width: 100%;
border-radius: 10px;
background-color: #ebeef5;
}
.progress-bar__inner{
/* width: 60%; */
background-color: rebeccapurple;
border-radius: 10px;
height: 100%;
transition: width 0.6s ease;
text-align: right;
line-height: 80%;
}
.progress__text{
font-size: 12px;
margin-left: 6px;
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
.icon-circle-close,.icon-close{
font-family: 'Wingdings' !important;
color:red;
}
.icon-circle-check,.icon-check{
font-family: 'Wingdings' !important;
color:seagreen;
}
.icon-circle-close::before{
content: '\FD';
}
.icon-close::before{
content: '\FB';
}
.icon-circle-check::before{
content: '\FE';
}
.icon-check::before{
content: '\FC';
}
.progress_circle{
/* 环形进度条 */
}
.progress--circle{
display: inline-block;
position: relative;
}
.progress--circle .progress__text{
position:absolute;
top:50%;
transform: translateY(-50%);
margin-left: 0px;
text-align: center;
width: 100%;
}
</style>
组件调用源码
首先引入组件,并注册组件,如下所示:
<script>
// 组件名称大小写敏感,不能和已经存在的HTML里面的控件同名,如果是驼峰形式,则可以用短横线的方式(如:d=progress)或者和名称保持一致
import dProgress from './Progress';
export default {
components:{
dProgress
},
}
</script>
然后进行调用即可,如下所示:
<template>
<div>
<H2>线性进度条--百分比外显</H2>
<dProgress :percentage="0" />
<dProgress :percentage="40" pcolor="orange" />
<dProgress :percentage="60" status="success" />
<dProgress :percentage="80" status="failure" />
<H2>线性进度条--百分比内显</H2>
<dProgress :percentage="0" :text-inside="true" :stroke-height="16"/>
<dProgress :percentage="40" :text-inside="true" :stroke-height="16"/>
<dProgress :percentage="60" status="success" :text-inside="true" :stroke-height="16"/>
<dProgress :percentage="80" status="failure" :text-inside="true" :stroke-height="16"/>
<h2>环形进度条</h2>
<dProgress :percentage="0" ptype="circle" />
<dProgress :percentage="40" ptype="circle" />
<dProgress :percentage="60" ptype="circle" status="success" />
<dProgress :percentage="80" ptype="circle" status="failure" />
</div>
</template>
如需本例完整代码,可以点击代码链接进行下载
备注
【曲玉管】
作者:柳永[宋]
陇首云飞,江边日晚,烟波满目凭阑久。
一望关河萧索,千里清秋,忍凝眸?
杳杳神京,盈盈仙子,别来锦字终难偶。
断雁无凭,冉冉飞下汀洲,思悠悠。
暗想当初,有多少、幽欢佳会,
岂知聚散难期,翻成雨恨云愁?
阻追游。每登山临水,惹起平生心事,
一场消黯,永日无言,却下层楼。