一起學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下可以包含多個子節點。如下所示：

<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>

如需本例完整代碼，可以點擊代碼鏈接進行下載

代碼鏈接

備注

 

【曲玉管】

作者：柳永[宋]

隴首雲飛，江邊日晚，煙波滿目憑闌久。

一望關河蕭索，千里清秋，忍凝眸？

杳杳神京，盈盈仙子，別來錦字終難偶。

斷雁無憑，冉冉飛下汀洲，思悠悠。

 

暗想當初，有多少、幽歡佳會，

豈知聚散難期，翻成雨恨雲愁？

阻追游。每登山臨水，惹起平生心事，

一場消黯，永日無言，卻下層樓。