可以通过
Vue 自定义指令来实现
全局 loading 指令，具体实现步骤如下：
1. 在
Vue 实例中注册
全局指令
```javascript
Vue.directive('
loading', {
// 指令选项
})
```
2. 在指令中定义 bind 和 unbind 钩子函数
```javascript
Vue.directive('
loading', {
bind: function (el, binding, vnode) {
// 绑定指令时执行的操作
},
unbind: function (el, binding, vnode) {
// 解绑指令时执行的操作
}
})
```
3. 在 bind 钩子函数中创建
loading 元素，并将其
添加到页面中
```javascript
Vue.directive('
loading', {
bind: function (el, binding, vnode) {
// 创建
loading 元素
const mask = document.createElement('div')
mask.classList.add('
loading-mask')
const spinner = document.createElement('div')
spinner.classList.add('
loading-spinner')
mask.appendChild(spinner)
// 将
loading 元素
添加到页面中
el.appendChild(mask)
},
unbind: function (el, binding, vnode) {
// 解绑指令时执行的操作
}
})
```
4. 在 bind 钩子函数中根据指令参数 show 控制
loading 元素的显示和隐藏
```javascript
Vue.directive('
loading', {
bind: function (el, binding, vnode) {
// 创建
loading 元素
const mask = document.createElement('div')
mask.classList.add('
loading-mask')
const spinner = document.createElement('div')
spinner.classList.add('
loading-spinner')
mask.appendChild(spinner)
// 将
loading 元素
添加到页面中
el.appendChild(mask)
// 根据指令参数 show 控制
loading 元素的显示和隐藏
if (binding.value) {
mask.style.display = 'block'
} else {
mask.style.display = 'none'
}
},
update: function (el, binding, vnode, oldVnode) {
if (binding.oldValue !== binding.value) {
if (binding.value) {
el.querySelector('.
loading-mask').style.display = 'block'
} else {
el.querySelector('.
loading-mask').style.display = 'none'
}
}
},
unbind: function (el, binding, vnode) {
// 解绑指令时执行的操作
}
})
```
5. 在 CSS 中定义
loading 元素的样式
```css
.
loading-mask {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background
-color: rgba(255, 255, 255, 0.8);
z
-index: 9999;
}
.
loading-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(
-50%,
-50%);
width: 40px;
height: 40px;
border
-radius: 50%;
border: 5px solid #ccc;
border
-top
-color: #333;
animation:
loading-spinner 1s linear infinite;
}
@keyframes
loading-spinner {
to {
transform: rotate(360deg);
}
}
```
最后，就可以在组件中使用 v
-loading 指令来控制
全局 loading 的显示和隐藏了。
```html
<template>
<div v
-loading="is
Loading">
<!
-- 页面内容
-->
</div>
</template>
<script>
export default {
data() {
return {
is
Loading: false
}
},
mounted() {
// 模拟请求数据
this.is
Loading = true
setTimeout(() => {
this.is
Loading = false
}, 2000)
}
}
</script>
```
扫一扫
1135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
