功能描述
我們?cè)陧?yè)面開始渲染等待后臺(tái)接口數(shù)據(jù)，或者提交表單數(shù)據(jù)的時(shí)候我們需要一個(gè)加載中的效果，我們可以利用vue提供的自定義指令來(lái)實(shí)現(xiàn)這個(gè)功能
實(shí)現(xiàn)部分
- 首先寫一個(gè)指令
/* eslint-disable no-console */
/*
* @Author: sunxy
* @Date: 2021-07-02 23:10:03
* @LastEditors: sunxy
* @LastEditTime: 2021-07-03 00:00:09
* @Description: loading 指令
* @FilePath: /demo1/src/loading.js
*/
import Vue from 'vue'
// loading 加載效果的組件 自定義編寫
import loading from './components/loading'
const loadDirective = {
//被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用
inserted(el, binding) {
const loadingCo = Vue.extend(loading)
//console.log('loadingCo', loadingCo)
const loadingComp = new loadingCo().$mount()
//console.log('loadingComp', loadingComp)
// 組件實(shí)例 掛到el元素上
el.loadingInstance = loadingComp
if (binding.value) {
el.appendChild(loadingComp.$el)
}
},
//所在組件的 VNode 更新時(shí)調(diào)用
update(el, binding) {
//當(dāng)值改變
if (binding.value !== binding.oldValue) {
if (binding.value) { //v-loading true
el.appendChild(el.loadingInstance.$el)
} else { //v-loading false 刪除節(jié)點(diǎn)
el.removeChild(el.loadingInstance.$el)
}
}
}
}
export default loadDirective
思路就是利用inserted 和 update 兩個(gè)鉤子函數(shù)。當(dāng)組件綁定或者更新這個(gè)指令時(shí)，通過(guò)binding的值來(lái)判斷狀態(tài)，然后將loading組件移除或者添加到綁定的節(jié)點(diǎn)上。
- 將指令掛在到全局此叠，當(dāng)然也可以在組件內(nèi)
// main.js
import loading from './loading'
Vue.directive('loading', loading)
3.在頁(yè)面中使用指令
<!-- 設(shè)置自定義指令 isLoading為true展示加載效果，false移除加載效果-->
<div class="list" v-loading="isLoading">
QQ20210703-001827@2x.png
