效果圖

首先我們看一下進度條組件運行出來的效果，如下圖顯示

進度條組件

實現過程

◾ 項目搭建

progressbar組件在一個可以直接運行的npm包，通過Yeoman進行構建，再通過Gulp+Webpack構建工具，生成的工作目錄如下，其中各個文件夾的內容入之前的一篇文章一樣

progressbar組件工作目錄

◾ progressbar源文件之template

progressbar組件表現為.vue文件的形式，其中template部分內容如下

progressbar源文件template部分

我們可以分析一下，progressbar組件主要有這幾項屬性：

1. 類型，利用type變量控制，例如有warning，danger，success，info等；
2. 是否是動態，利用animate變量控制；
3. 當前值，利用value變量控制；
4. 最大值，利用max變量控制；
5. 百分比，利用percent變量控制，這是通過value與max值計算出來的，為Vue的一個計算屬性；
6. 顯示的百分比值，利用valueText值控制，為Vue的一個計算屬性

◾ progressbar源文件之script

progressbar組件的script部分

◾ progressbar組件之style

其中style的部分內容比較多，首先看下基本的progressbar的css屬性，包括progress和progress-bar的部分

基本的css部分

然后看下表示不同顏色的css樣式

表示顏色的css樣式

最后看下表示動畫效果的css樣式

動畫效果的css樣式

◾ 示例

在完成上述的步驟后，便可以完成一個progressbar組件，接下來看下progressbar組件的使用，如果能運行出來，就可以看到文章一開始的效果。

progressbar組件的使用

總結

本文詳細的介紹了編寫progressbar組件的過程，希望能對大家有幫助。