封装loading效果的vue全局自定义指令

前言：今天遇到个场景，接口较慢的场景，需要添加loading效果，查后发现原项目没有这部分代码，遂自己封装一个吧

一、需要写一个vue文件，写入loading效果的元素和样式，留一个入口判断显隐

<template>

<div v-show="visible" class="loading-box">

<div class="loading">

<div class="circle"></div>

<span>加载中... ...</span>

</div>

</div>

</template>

<script>

export default {

data() {

return {

visible: false,

};

},

};

</script>

<style scoped lang="scss">

.loading-box {

width: 100%;

height: 100%;

display: flex;

align-items: center;

justify-content: center;

background: rgb(128 128 128 / 20%);

position: absolute;

top: 0;

left: 0;

:deep(.ant-spin-dot-item) {

background-color: #FFF;

}

:deep(.ant-spin.ant-spin-show-text .ant-spin-text) {

color: #FFF;

}

}

.loading {

color: #1890ff;

font-size: 12px;

display: flex;

flex-direction: column;

align-items: center;

}

.circle {

width: 18px;

height: 18px;

border: 2px white solid;

border-left-color: #1890ff;

border-right-color: #1890ff;

border-radius: 100%;

animation: loading1 1s infinite linear;

margin-bottom: 5px;

}

@keyframes loading1 {

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

}

</style>

二、写vue自定义指令的相关钩子函数，并写成一个文件

import Vue from 'vue'

import Loading from ' 引入loading的vue文件'

const Mask = Vue.extend(Loading)

const toggleLoading = (el, binding) => {

if (binding.value) {

Vue.nextTick(() => {

// 控制loading组件显示

el.instance.visible = true

// 插入到目标元素

insertDom(el, el, binding)

})

} else {

el.instance.visible = false

}

}

const insertDom = (parent, el) => {

// 给父元素加个定位，让loading元素定位

el.style.position='relative';

parent.appendChild(el.mask)

}

export default {

bind: function (el, binding, vnode) {

const mask = new Mask({

el: document.createElement('div'),

data() { }

})

el.instance = mask

el.mask = mask.$el

el.maskStyle = {}

binding.value && toggleLoading(el, binding)

},

update: function (el, binding) {

if (binding.oldValue !== binding.value) {

toggleLoading(el, binding)

}

},

unbind: function (el, binding) {

el.style.position='';

el.instance && el.instance.$destroy()

}

}

三、找到项目中注册directive的地方，并引入文件后，注册

import loading from '文件地址'

const install = function(Vue) {

//... 省略其余注册

Vue.directive('loading', loading);

}

四、在main.js中注册directive

import directive from '引入文件' // directive

Vue.use(directive)

五、在代码中可以使用

<div v-loading="true"></div>

效果如下：