使用 Vue3 自定义v-myLoading指令~

前言

什么是指令？

类似于v-model 或 v-show，这些是Vue 内置的一系列指令，那除了内置指令之外，Vue还允许我们自己注册自己所需要的指令。

今天就借助 v-loading 的效果来实现一个我们自己的 v-myLoading 吧！

效果

在线预览：Demo Show (chenyajun.fun)

不同尺寸的元素，都可以垂直水平居中

原理

自定义指令的相关知识可以去 Vue3 官方文档看一下：

自定义指令 | Vue.js (vuejs.org)

首先我们知道我们需要实现的是v-loading，那一个loading效果是什么样的呢？

可以清楚的看到，需要在目标区域垂直水平居中，并且使背景色为不完全透明的白色。

背景色好搞定，那如何使 loading 永远居中在目标容器内呢？ 

我们知道，如果子元素使用绝对定位，并且父元素为非static定位的话，便可充当参照物，就可以通过定位将子元居中在目标区域内。

那接下来我们需要做的就是：

1. 创建loading组件
2. 找到目标元素，把 loading 组件添加进去。
3. 为目标元素设置为参照物属性。
4. 对 loading 状态进行开关控制。

实现

首先创建一个用于页面显示的loading组件，下面核心代码，在页面