手把手教你實現乙個 Vue 進度條元件！

最近在個人的專案中，想對頁面之間跳轉的過程進行優化，想到了很多文件或 npm 等都用到的頁面跳轉進度條，於是便想自己去實現乙個，特此記錄。來看下 npm 搜尋元件時候的效果：

so 下面咱們一起動手實現一下唄。

定義使用方式

想實現乙個元件的前提，一定要想好你的需求是什麼，還要自己去定義乙個舒服的使用方法，這其中也是有原則的，對使用者來說，使用方式越簡單越好。那麼對應的代價就是寫這個元件的複雜度會變高。

我想要的使用方式是這樣的：可以在任意的地方去呼叫到這個方法，可以隨時控制其狀態。

看下對應的**：

async somefunction ()  catch (err) 
}複製**

當然，想在任意地方使用，少不了乙個步驟，就是在全域性註冊這個元件：

import progressbar from '***/progress-bar'
vue.use(progressbar, )
複製**

如果不想全域性註冊，你也可以在某個元件內單獨使用，只要你開心就好。

實現過程

先來建立乙個資料夾和其中兩個檔案：

progress-bar - 01 progress-bar.vue - 02 index.js

複製**

開啟progress-bar.vue，先來寫結構和樣式，這裡很簡單：

複製**

在註冊元件的時候，我想可以自定義一些功能，比如

當然只要你想到的都可以新增，那麼這些可以定製的屬性，自然而然就成為了元件的 props：

export default ,
inverse: false,  // 進度條的載入方向
thickness: 2  // 進度條的高度}}
}}}
複製**

除了要定義的屬性以外，那麼元件本身總要有一些自己的屬性，用來控制自己的狀態，比如這個元件，你要控制進度條的長度、顯示和隱藏等狀態。

新增 vue 的 data 屬性：

data () 
}複製**

有了這些屬性，這個進度條就要根據這些屬性的變化來「自己動」。所以這個時候首先想到的當然就是 vue 的計算屬性：

computed:  = this.options
const  = transition
const  = this
// 定義 css 樣式
const style = 
if (position !== 'top' || position !== 'bottom') 
style[position] = 0
if (inverse)  else 
style.width = preset + '%'  // 設定進度條長度
style.height = thickness + 'px'  // 設定顯示高度
style.transition = `width $ms, opacity $ms`  // 設定過度樣式
return style}}
複製**

到這裡這個 vue 元件其實就完成了，接下來就是如何去控制它。開啟index.js，先來寫乙個標準的元件格式：

import progressbar from './progress-bar.vue'
export default ) 
}複製**

之後咱們要用到 vue 提供的擴充套件方法，來完成咱們的需求。

第一步，新增 autofinish 屬性，用來設定動畫是否可以自動完成，預設是 true，當然如果某個路由或請求一直處於 pending 狀態，你可以可以設定讓其永遠不完成動畫的動作。

第二步，來寫乙個物件，其中包含 start 、 finish 、 fail 方法以及動畫**。

第三步，將這個物件掛在到 vue 的原型

完整的**和說明如下：

import progressbar from './progress-bar.vue'
export default )  = options
// 建立元件例項
const vm = new component(
})// 將 progressbar 的預設 options 與 自定義的 options 合併
options = object.assign(vm.$props.options, )
//合併新的 props
vm.$propsdata = options
vm.$mount()
// 如果是服務端渲染那麼不繼續執行
if (!vm.$isserver) 
let timer = null
const progress = 
}, 100)
},increase (cut) ,
hide () , vm.options.transition.opacityspeed)
}, vm.options.transition.duration)
},// 下面這2個方法就很簡單了，只需要完成進度，然後執行隱藏即可
finish () ,
fail () 
}// 最後掛在到全域性
vue.prototype.$progress = progress}}
複製**

到這裡，乙個進度條元件就完成了。大家可以自己動手實踐一下，起乙個專案，使用 vue-router 的 beforeresolve 宣告週期鉤子，或者寫乙個定時器模擬非同步來測試一下。

以上是筆者歸納總結，如有誤之處，歡迎指出。

訂閱號id：miaovclass

關注妙味訂閱號：「妙味前端」，為您帶來優質前端技術乾貨；

手把手教你製作乙個Windows服務

也許你認為開發windows服務是件非常困難的事件，需要了解非常多的作業系統原理以及精通windows的各種api。其實沒有這麼誇張，windows服務就像乙個框架一樣，至於你往裡面加些什麼完全在與你自己。好吧，現在我們就往裡面加 helloworld 吧。開學習製作windows服務之前我們先大概...

手把手教你寫乙個ORM（二）

昨夜一夜未睡，本來以為下班回家能倒下就打呼嚕的，結果吃了晚飯後反而清醒起來了，於是決定把本打算明天寫的部分提前。半夜三更不睡覺幹嘛？出來假扮王祖賢阿根據前面的需求，我們發現需要將配置檔案抽象出乙個元件出來，快取需要乙個單獨的元件，為了適應不同的資料庫需要做成乙個外掛程式架構的，為不同資料庫插入不同...

Vue手寫乙個進度條

雖然現在ui框架和外掛程式都很多，但是可能與我們需要的需求不一樣，或者樣式不好調，所以我們就來手寫乙個吧先看一下要實現的效果實際開發這些肯定都是後台傳的資料對吧，進度條變化的同時，上面的數字和中間的圓點也隨著動，不可能定死對吧一.先寫外面那個顏色淺的盒子 progresscontainer 二...

手把手教你實現乙個 Vue 進度條元件！

手把手教你製作乙個Windows服務

手把手教你寫乙個ORM（二）

Vue手寫乙個進度條

相關推薦