一起学Vue自定义组件之进度条

当前位置:

首页 > temp > JavaScript教程 >

一起学Vue自定义组件之进度条

在日常开发中，随着需求的个性化，逻辑的复杂化，自定义组件也变得越来越常见，而且组件具有扩展性强，易复用，封装复杂的代码逻辑等优点，可以用小组件来构建大型应用系统。本文以一个简单的小例子，简述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>
				