技巧-封装自定义指令loading效果

一般情况下，会封装一个loading组件，导入，注册，使用，然后根据数据的加载状态，控制loading组件的显示与隐藏，如

  <Loading v-if="isLoading"/>

这种是比较传统的一种方法，封装简单，但每次使用都得引入，注册，比较麻烦。当然了，如果注册为全局组件就不需要这么麻烦了。

现在记录一下用自定义指令实现loading效果的方法。有几个步骤，注册指令，编写指令，只用指令。

1. 注册指令 v-loading

//main.js

//全局注册自定义指令
import vLoading from "./commonJs/loading.js";
app.directive("loading",vLoading);

2. 编写指令

//loading.js

import loadingUrl from "@/assets/icon/loading.svg";

//判断 el 中是否存在loading效果的img元素
function isExist(el) {
  return el.querySelector("img[data-role=loading]");
}

//创建 img 元素
function createLoadingImg() {
  const img = document.createElement("img");
  
  img.dataset.role = "loading";
  img.src = loadingUrl;
  img.className = "self-center"; //居中的公共样式
  return img;
}

//导出指令的配置对象
export default function (el, binding) {
  //根据 binding.value 的值，决定创建或删除img元素
  const loadingImgIsExist = isExist(el);
  
  if (binding.value) {
    if (!loadingImgIsExist) {
      console.log("el", el);
      const img = createLoadingImg();
      el.appendChild(img);
    }
  } else {
    if (loadingImgIsExist) {
      loadingImgIsExist.remove();
    }
  }
}

4. 使用指令 v-loading

<div class="tables" v-loading="isLoading">