vue自定义loading效果

需求

近期在使用Material这个UI框架的时候，需要使用到一个区域loading效果，我找了下文档，没有找到，于是乎，就手写一个吧。
我想实现的效果和ElementUI类似，在DOM上加一个v-loading=“true”就可以调用，v-loading=“false”就可以关闭，想查下有没有类似的插件，但是也没有找到，看了网上的一些文档都是需要写一个组件，然后引入之类的效果，然后v-show=true或false来控制显示与否，我觉得又有点累赘，所以想到了自定义指令然后自己写一个，下面来看一下我的思路吧。

思路

这里需要用到vue的自定义指令directive，所以你可能需要对vue的自定义指令稍微有一点点的了解。
上面说过我想在我想要加入loading的区域的DOM上加上v-loading=“true”调用，那么我就需要配置我这个“v-loading”，下面我把我自定义的这个loading指令命名为“v-customLoading”，我的实现原理是这样的：v-customLoading=“true”的时候动态的在我需要loading的区域内插入一段DOM为loading效果，同时为false的时候删除这段DOM，话不多说，直接上代码：
首先在你的main.js内new Vue实例的上方加上这段代码（请注意阅读注释）：

//customLoading为自定义指令的名字
//update为自定义指令的参数，当更新的时候会执行这个方法，它可以接受很多参数
//但我们这里只需要用到两个：el获取当前DOM，value获取当前指令的参数值

Vue.directive('customLoading',{
   
  update:function (el,value) {
   
    if(value.value){
   
      console.log(el);
      const canPush = el.getElementsByClassName("customLoading");
      if