溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue進(jìn)度條progressbar組件功能

發(fā)布時(shí)間：2020-10-14 11:03:08 來源：腳本之家 閱讀：261 作者：enterlind 欄目：web開發(fā)

效果圖

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

Vue進(jìn)度條progressbar組件功能

進(jìn)度條組件

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

◾ 項(xiàng)目搭建

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

Vue進(jìn)度條progressbar組件功能

progressbar組件工作目錄

◾ progressbar源文件之template

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

Vue進(jìn)度條progressbar組件功能

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

Vue進(jìn)度條progressbar組件功能

progressbar組件的script部分

◾ progressbar組件之style

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

Vue進(jìn)度條progressbar組件功能

基本的css部分

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

Vue進(jìn)度條progressbar組件功能

表示顏色的css樣式

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

Vue進(jìn)度條progressbar組件功能

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

◾ 示例

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

Vue進(jìn)度條progressbar組件功能

progressbar組件的使用

總結(jié)

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手