這篇文章主要介紹了如何寫一個(gè)即插即用的Vue Loading插件，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括于田網(wǎng)站建設(shè)、于田網(wǎng)站制作、于田網(wǎng)頁制作以及于田網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，于田網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到于田省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
無論最終要實(shí)現(xiàn)怎樣的網(wǎng)站，Loading狀態(tài)都是必不可少的一環(huán)，給用戶一個(gè)過渡喘息的機(jī)會(huì)也給服務(wù)器一個(gè)遞達(dá)響應(yīng)的時(shí)間。
從使用方式說起
不管從0開始寫起還是直接下載的Loading插件，都會(huì)抽象為一個(gè)組件，在用到的時(shí)候進(jìn)行加載Loading，或者通過API手動(dòng)進(jìn)行show或者h(yuǎn)ide
...
this.$wait.show()
await fetch('http://example.org')
this.$wait.hide()
或者通過Loading狀態(tài)進(jìn)行組件間的切換
。要想注冊成全局狀態(tài)，還需要給axios類的網(wǎng)絡(luò)請求包添加攔截器，然后設(shè)置一個(gè)全局Loading狀態(tài)，每次有網(wǎng)絡(luò)請求或者根據(jù)已經(jīng)設(shè)置好的URL將Loading狀態(tài)設(shè)置為加載，請求完成后在設(shè)置為完成。
注冊axios攔截器：
let loadingUrls = [
`${apiUrl}/loading/`,
`${apiUrl}/index/`,
`${apiUrl}/comments/`,
...
]
axios.interceptors.request.use((config) => {
let url = config.url
if (loadingUrls.indexOf('url') !== -1) {
store.loading.isLoading = true
}
})
axios.interceptors.response.use((response) => {
let url = response.config.url
if (loadingUrls.indexOf('url') !== -1) {
store.loading.isLoading = false
}
})使用時(shí)在每個(gè)組件下獲取出loading狀態(tài)，然后判斷什么時(shí)候顯示loading，什么時(shí)候顯示真正的組件。
在當(dāng)前頁面下只有一個(gè)需要Loading的狀態(tài)時(shí)使用良好，但如果在同一個(gè)頁面下有多個(gè)不同的組件都需要Loading，你還需要根據(jù)不同組件進(jìn)行標(biāo)記，好讓已經(jīng)加載完的組件不重復(fù)進(jìn)入Loading狀態(tài)...隨著業(yè)務(wù)不斷增加，重復(fù)進(jìn)行的Loading判斷足以讓人煩躁不已...
整理思路
Loading的核心很簡單，就是請求服務(wù)器時(shí)需要顯示Loading，請求完了再還原回來，這個(gè)思路實(shí)現(xiàn)起來并不費(fèi)力，只不過使用方式上逃不開上面的顯式調(diào)用的方式。順著思路來看，能進(jìn)行Loading設(shè)置的地方有，
設(shè)置全局?jǐn)r截，請求開始前設(shè)置狀態(tài)為加載。
設(shè)置全局?jǐn)r截，請求結(jié)束后設(shè)置狀態(tài)為完成。
在觸發(fā)請求的函數(shù)中進(jìn)行攔截，觸發(fā)前設(shè)置為加載，觸發(fā)后設(shè)置為完成。
判斷請求后的數(shù)據(jù)是否為非空，如果非空則設(shè)置為完成
最終可以實(shí)現(xiàn)的情況上，進(jìn)行全局?jǐn)r截設(shè)置，然后局部的判斷是最容易想到也是最容易實(shí)現(xiàn)的方案。給每個(gè)觸發(fā)的函數(shù)設(shè)置before和after看起來美好，但實(shí)現(xiàn)起來簡直是災(zāi)難，我們并沒有before和after這兩個(gè)函數(shù)鉤子來告訴我們函數(shù)什么時(shí)候調(diào)用了和調(diào)用完了，自己實(shí)現(xiàn)吧坑很多，不實(shí)現(xiàn)吧又沒得用只能去原函數(shù)里一個(gè)個(gè)寫上。只判斷數(shù)據(jù)局限性很大，只有一次機(jī)會(huì)。
既然是即插即用的插件，使用起來就得突出一個(gè)簡單易用，基本思路上也是使用全局?jǐn)r截，但局部判斷方面與常規(guī)略有不同，使用數(shù)據(jù)綁定(當(dāng)然也可以再次全局響應(yīng)攔截)，咱們實(shí)現(xiàn)起來吧~。
樣式
Loading嘛，必須得有一個(gè)轉(zhuǎn)圈圈才能叫Loading，樣式并不是這個(gè)插件的最主要的，這里直接用CSS實(shí)現(xiàn)一個(gè)容易實(shí)現(xiàn)又不顯得很糙的：
.loading {
width: 50px;
height: 50px;
border: 4px solid rgba(0,0,0,0.1);
border-radius: 50%;
border-left-color: red;
animation: loading 1s infinite linear;
}
@keyframes loading {
0% { transform: rotate(0deg) }
100% { transform: rotate(360deg) }
}
固定大小50px的正方形，使用border-radius把它盤得圓潤一些，border設(shè)置個(gè)進(jìn)度條底座，border-left-color設(shè)置為進(jìn)度條好了。
演示地址
綁定數(shù)據(jù)與URL
提供外部使用接口
上面思路中提到，這個(gè)插件是用全局?jǐn)r截與數(shù)據(jù)綁定制作的：
...
....
不用關(guān)心source是什么類型的數(shù)據(jù)，我們只需要監(jiān)控它，每次變化時(shí)都將Loading狀態(tài)設(shè)置為完成即可，urls我們稍后再來完善它。
設(shè)置請求攔截器
攔截器中需要的操作是將請求時(shí)的每個(gè)URL壓入一個(gè)容器內(nèi)，請求完再把它刪掉。
Vue.prototype.__loader_checks = []
Vue.prototype.$__loadingHTTP = new Proxy({}, {
set: function (target, key, value, receiver) {
let oldValue = target[key]
if (!oldValue) {
Vue.prototype.__loader_checks.forEach((func) => {
func(key, value)
})
}
return Reflect.set(target, key, value, receiver)
}
})
axios.interceptors.request.use(config => {
Vue.prototype.$__loadingHTTP[config.url] = config
return config
})
axios.interceptors.response.use(response => {
delete Vue.prototype.$__loadingHTTP[response.config.url]
return response
})將其掛載在Vue實(shí)例上，方便我們之后進(jìn)行調(diào)用，當(dāng)然還可以用Vuex，但此次插件要突出一個(gè)依賴少，所以Vuex還是不用啦。
直接掛載在Vue上的數(shù)據(jù)不能通過computed或者watch來監(jiān)控?cái)?shù)據(jù)變化，咱們用Proxy代理攔截set方法，每當(dāng)有請求URL壓入時(shí)就做點(diǎn)什么事。Vue.prototype.__loader_checks用來存放哪些實(shí)例化出來的組件訂閱了請求URL時(shí)做加載的事件，這樣每次有URL壓入時(shí)，通過Proxy來分發(fā)給訂閱過得實(shí)例化Loading組件。
訂閱URL事件
...
....
每一個(gè)都是一個(gè)嶄新的實(shí)例，所以直接在mounted里訂閱URL事件即可，只要有傳入urls，就對__loader_checks里每一個(gè)訂閱的對象進(jìn)行發(fā)布，Loader實(shí)例接受到發(fā)布后會(huì)判斷這個(gè)URL是否與自己注冊的對應(yīng)，對應(yīng)的話會(huì)將自己的狀態(tài)設(shè)置回加載，URL請求后勢必會(huì)引起數(shù)據(jù)的更新，這時(shí)我們上面監(jiān)控的source就會(huì)起作用將加載狀態(tài)設(shè)置回完成。
使用槽來適配原來的組件
寫完上面這些你可能有些疑問，怎么將Loading時(shí)不應(yīng)該顯示的部分隱藏呢？答案是使用槽來適配，
重慶分公司
重慶分公司
