<div class="box" v-load="loading">111</div>loading: true.box {width: 160px;height: 80px;border: 2px solid #666;
}

bind(el, binding) {const target = el;// 父元素相对定位target.style.position = "relative";// 子元素遮罩层部分let loadChild = document.createElement("div");loadChild.className = "loadClass";
}

上述代码中给加载中的子元素loadChild指定一个样式类名loadClass

在这里小伙伴可能有疑问了，这个自定义指令的样式怎么写呢？自定义指令中也没有style标签啊？

是的，自定义指令中不能直接写样式，不过没关系，我们可以先写好一个css样式，然后引入过来使用啊，如下：

// 引入拆分的样式，便于自定义指令中使用
import './index.css'bind(el, binding) {......loadChild.className = "loadClass";
}

.loadClass {/* 宽高百分百 */position: absolute;top: 0;bottom: 0;left: 0;right: 0;/* 默认背景色和颜色 */background-color: rgba(255, 255, 255, 0.99);color: #0b6ed0;/* 透明度过渡使用搭配display:none; */opacity: 0.8;transition: all 0.3s;/* 居中 */ display: flex;align-items: center;justify-content: center;
}

注意，加载中效果开启和消失，不用使用vue自带的过渡组件transition，咱们可以使用透明度搭配搭配display:none;去设置

注意，加载中要以父元素为边界去控制，可不能满屏加载哦

然后初始化的时候，看看v-load绑定的值是true还是false，同时加上一个用于隐藏的类名：load-hide。再把这个加载中的dom元素追加到目标父元素身上。

loadChild.classList.add('load-hide') // 添加类名
target.appendChild(loadChild); // 追加加载中子元素/* 通过透明度实现过渡动画 */
.load-hide {opacity: 0;
}

componentUpdated(el, binding, vnode, oldVnode) {let flag = binding.valuelet loadChild = el.querySelector('.loadClass')if (flag) { // v-load绑定的值为true，就移除这个类名，就能看到了loadChild.style.display = 'flex'setTimeout(() => {loadChild.classList.remove('load-hide')}, 0);} else { // 绑定的值为false时，再添加这个类名，同时隐藏domloadChild.classList.add('load-hide')setTimeout(() => {loadChild.style.display = 'none'}, 360);}},

注意上述代码中为啥不直接隐藏，而是使用定时器延长360毫秒再去隐藏，因为笔者设置的加载dom的过渡时间是0.3秒，即要等到透明度过渡完了以后，再隐藏加载中dom，这样看着就自然一些了。

.loadClass { transition: all 0.3s; }

到这里，咱们的v-load自定义指令的加载中效果，就初步完成了。不过功能有点少，自定义加载中我还想，去动态控制：

• 自定义加载图标名
• 自定义加载文字
• 自定义加载文字颜色
• 自定义加载背景色

那这样怎么办呢？

实现步骤四：优化自定义指令，支持传入更多的参数

此时，我的v-load自定义指令，就不用绑定一个布尔值了。可以考虑绑定一个对象啊，通过控制这个对象的具体值，来动态控制加载中的效果。

• 原来自定义指令绑定：v-load = loading // typeof loading == 'boolean'
• 现在自定义指令绑定：v-load = loading2 // typeof loading2 == 'object'

<div class="box" v-load="loading2">222</div>// 如果想要有更多的配置项，就传一个对象，注意要指定字段
loading2: {value: true,icon: "el-icon-eleme", // 自定义加载图标名text: "客官稍等哦...", // 自定义加载文字color: "red", // 自定义加载文字颜色bgColor: "#baf", // 自定义加载背景色
}

传参指定相应字段，自定义指令中接参，就要在相关的钩子中去接收并处理这些参数。

如何处理这些参数？

• v-load绑定的值的类型的判断，是布尔值，还是对象，执行不同的操作
• 使用原生js的方式去，创造dom元素、给dom元素指定类名(或添加删除类名)
• 考虑到性能缘故，可以使用文档碎片优化document.createDocumentFragment()
• 最后丢入遮罩层dom内部即可

完整代码

自定义指令样式文件index.css

.loadClass {/* 宽高百分百 */position: absolute;top: 0;bottom: 0;left: 0;right: 0;/* 默认背景色和颜色 */background-color: rgba(255, 255, 255, 0.99);color: #0b6ed0;/* 透明度过渡使用搭配display:none; */opacity: 0.8;transition: all 0.3s;/* 禁止文字选择 */user-select: none;display: flex;align-items: center;justify-content: center;
}/* 通过透明度实现过渡动画 */
.load-hide {opacity: 0;
}.loadClass>i {margin-right: 4px;
}

// 引入拆分的样式，便于自定义指令中使用
import './index.css'
export default {// 初始化绑定dom钩子函数bind(el, binding) {const target = el;// 传参类型判断变量控制let flag;let isObj;if (typeof binding.value == 'boolean') {flag = binding.valueisObj = false}if (typeof binding.value == 'object') {flag = binding.value.valueisObj = true}// 有dom元素才去做操作if (target) {// 父元素相对定位target.style.position = "relative";// 子元素遮罩层部分let loadChild = document.createElement("div");loadChild.className = "loadClass";// 创建文档碎片性能稍微优化一点点let fragment = document.createDocumentFragment()// 孙子元素1加载图标部分let iSun = document.createElement("i");iSun.className = isObj ? binding.value.icon : "el-icon-loading";// 孙子元素2文字提示部分let spanSun = document.createElement("span");spanSun.innerHTML = isObj ? binding.value.text : '加载中...'// 使用文档碎片将iSun和spanSun装起来fragment.appendChild(iSun);fragment.appendChild(spanSun);// 将文档碎片丢入子元素遮罩层内loadChild.appendChild(fragment);// 样式判断设置if (isObj) {loadChild.style.color = binding.value.colorloadChild.style.backgroundColor = binding.value.bgColor}// 若为false，就隐藏if (!flag) {loadChild.classList.add('load-hide')loadChild.style.display = 'none'}// 父元素添加子元素遮罩层使用target.appendChild(loadChild);}},// dom组件更新操作控制显示和隐藏componentUpdated(el, binding, vnode, oldVnode) {let flag = typeof binding.value == 'boolean' ? binding.value : binding.value.valuelet loadChild = el.querySelector('.loadClass')if (flag) {loadChild.style.display = 'flex'setTimeout(() => {loadChild.classList.remove('load-hide')}, 0);} else {loadChild.classList.add('load-hide')setTimeout(() => {loadChild.style.display = 'none'}, 360);}},
}

<template><div><h3>指令方式加载中...</h3><br /><button @click="loadFn">点一下</button><br /><br /><el-table v-load="loading" border :data="tableData" style="width: 80%"><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="age" label="年龄"></el-table-column><el-table-column prop="home" label="家乡"></el-table-column><el-table-column prop="like" label="爱好"></el-table-column></el-table><br /><div class="box" v-load="loading">111</div><br /><div class="box" v-load="loading2">222</div></div>
</template><script>
export default {name: "myLoadName",data() {return {// 自定义指令方式，默认绑定的值是布尔值loading: true,// 如果想要有更多的配置项，就传一个对象，注意要指定字段loading2: {value: true,icon: "el-icon-eleme", // 自定义加载图标名text: "客官稍等哦...", // 自定义加载文字color: "red", // 自定义加载文字颜色bgColor: "#baf", // 自定义加载背景色},tableData: [{name: "孙悟空",age: 500,home: "花果山水帘洞",like: "桃子",},{name: "猪八戒",age: 88,home: "高老庄",like: "肉包子",},{name: "沙和尚",age: 1000,home: "通天河",like: "游泳",},],};},methods: {loadFn() {this.loading = !this.loading;this.loading2.value = !this.loading2.value;},},
};
</script><style lang='less' scoped>
.box {width: 160px;height: 80px;border: 2px solid #666;box-sizing: border-box;
}
</style>