0%

Vue 自定义 loading 指令

发表于 更新于

在此不赘述何为自定义指令，请自行查看官方文档：

自定义指令 — Vue.js

团队项目开发基于 element ui，但是在实际开发过程中发现 element 的 loading 样式并不能满足实际开发中的需求，遂决定利用 vue 的自定义指令添加一个全局的 loading 指令。

loading 指令的核心是在 bind 和 componentUpdated 钩子中，当 binding.value 为 true 时给元素添加一个加载遮罩，false 时移除遮罩。需要注意的是，在项目开发中加载状态分为加载中和加载完成，各自对应不同的样式。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
Vue.directive('loading', {
    bind(el, binding) {
        if(binding.value) {
            // 限制全局只有一个弹窗
            let myLoading = document.getElementById('my-loading')
            if(myLoading) {
                myLoading.parentNode.removeChild(myLoading)
            }
            let div = document.createElement('div')
            div.setAttribute('id', 'my-loading')
            // 自定义弹窗样式
            div.innerHTML = `<div>加载中</div>`
            document.body.appendChild(div)
        }
    },
    componentUpdated(el, binding) {
        if(binding.oldValue !== binding.value) {
            // 在组件更新时对绑定值进行判定
            if(binding.value) {
                let myLoading = document.getElementById('my-loading')
                if(myLoading) {
                    myLoading.parentNode.removeChild(myLoading)
                }
                let div = document.createElement('div')
                div.setAttribute('id', 'my-loading')
                // 自定义加载中样式
                div.innerHTML = `<div>加载中</div>`
                document.body.appendChild(div)
            } else {
                let myLoading = document.getElementById('my-loading')
                // 自定义加载完成样式
                div.innerHTML = `<div>加载完成</div>`
                // 加载完成动画完成之后从 DOM 中移除元素
                setTimeout(() => {
                    myLoading.parentNode.removeChild(myLoading)
                }, 1000)
            }
        }
    }
})