在日常開發中，隨著需求的個性化，邏輯的復雜化，自定義組件也變得越來越常見，而且組件具有擴展性強，易復用，封裝復雜的代碼邏輯等優點，可以用小組件來構建大型應用系統，本文以一個簡單的小例子，簡述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下可以包含多個子節點，如下所示：
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" :style="{height:strokeHeight+'px'}"> 6 <div class="progress-bar__inner" :style="barStyle"> 7 <!-- 進度條內顯示百分比 --> 8 <div v-if="textInside" class="progress__text" style="color:white;"> {{percentage}}% </div> 9 </div> 10 </div> 11 12 </div> 13 <!-- 環形進度條 采用SVG實作 --> 14 <div class="progress_circle" :style="{width:cwidth+'px',height:cwidth+'px'}" v-else> 15 <svg viewBox="0 0 100 100" :style="{width:cwidth+'px',height:cwidth+'px'}"> 16 <!-- 背景圓形 --> 17 <path :d="trackPath" fill="none" :stroke-width="relativeStrokeHeight" stroke="#e5e9f2" /> 18 <!-- 進度圓形 --> 19 <path :d="trackPath" fill="none" :stroke-width="relativeStrokeHeight" :stroke="stroke" :style="circlePathStyle" stroke-linecap="round" /> 20 </svg> 21 </div> 22 <div v-if="!textInside" class="progress__text" :style="{fontSize:progressTextSize+'px'}"> 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, 8 default:10 9 }, 10 percentage:{ 11 // 進度條百分比 12 type:Number, 13 default:0, 14 required:true, 15 valiator(value){ 16 return value>=0 && value<=100 17 }, 18 }, 19 status:{ 20 // 進度條狀態：正常狀態，成功狀態，例外狀態 21 type:String, 22 23 }, 24 ptype:{ 25 // 進度條樣式：條形，還是圓形 26 type:String, 27 default:'line', 28 validator:val=>['circle','line'].includes(val) 29 }, 30 textInside:{ 31 // 文字是否內顯 32 type:Boolean, 33 default:false, 34 }, 35 pcolor:{ 36 // 進度條顏色 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 // 計算屬性呼叫其他計算屬性，必須加this關鍵字，否則找不到 68 return {width:this.percentage+'%',backgroundColor:this.stroke} 69 }, 70 iconCls(){ 71 if( this.ptype ==='line'){ 72 // 如果是線性進度條 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>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
如需本例完整代碼，可以點擊代碼鏈接進行下載
代碼鏈接
備注
【曲玉管】
作者：柳永[宋]
隴首云飛，江邊日晚，煙波滿目憑闌久，
一望關河蕭索，千里清秋，忍凝眸？
杳杳神京，盈盈仙子，別來錦字終難偶，
斷雁無憑，冉冉飛下汀洲，思悠悠，
暗想當初，有多少、幽歡佳會，
豈知聚散難期，翻成雨恨云愁？
阻追游，每登山臨水，惹起平生心事，
一場消黯，永日無言，卻下層樓，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/2420.html
標籤：JavaScript
上一篇：Vue生命周期，我奶奶看了都懂了
下一篇：es7如何跑起來裝飾器