progressbar組件實(shí)戰(zhàn)案例解析

效果圖

首先我們看一下進(jìn)度條組件運(yùn)行出來的效果，如下圖顯示

進(jìn)度條組件

實(shí)現(xiàn)過程

? 項(xiàng)目搭建

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

progressbar組件工作目錄

? progressbar源文件之template

progressbar組件表現(xiàn)為.vue文件的形式，其中template部分內(nèi)容如下

progressbar源文件template部分

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

1. 類型，利用type變量控制，例如有warning，danger，success，info等；

2. 是否是動(dòng)態(tài)，利用animate變量控制；

3. 當(dāng)前值，利用value變量控制；

4. 最大值，利用max變量控制；

5. 百分比，利用percent變量控制，這是通過value與max值計(jì)算出來的，為Vue的一個(gè)計(jì)算屬性；

6. 顯示的百分比值，利用valueText值控制，為Vue的一個(gè)計(jì)算屬性

? progressbar源文件之script

progressbar組件的script部分

? progressbar組件之style

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

基本的css部分

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

表示顏色的css樣式

最后看下表示動(dòng)畫效果的css樣式

動(dòng)畫效果的css樣式

? 示例

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

progressbar組件的使用

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

base64怎樣加密與解密

如何使用JS取得最近7天與最近3天日期

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com