实现一个v-loading指令

前言

现在pc端很多ui库是自带 v-loading 指令的，但是移动端可能就缺失，例如 vant 目前是没有的。所以，需要自己实现。

实战

Loading 组件

实现 v-loading 效果的关键是在指定元素上，挂载loading，loading的效果可以根据自己意愿开发，可以是 gif，可以是 svg，可以是组件库自带的loading组件 这次 Loading 组件是基于 vant loading组件来实现的

Loading.vue

<template>
  <transition
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
  >
    <div v-if="show" class="root-box">
      <div class="wrap">
        <!-- 这里可根据自己意愿修改，改为 gif、svg 或者手写css loading 都可以 -->
        <van-loading color="var(--van-primary-color)" />
      </div>
    </div>
  </transition>
</template>

<script setup>
const show = ref(false);

// 打开方法
const showLoading = () => {
  show.value = true;
};

// 关闭方法，接收一个回调函数，可以在关闭之后执行操作
const hideLoading = callback => {
  show.value = false;
  callback && setTimeout(() => callback(), 500);
};

// 暴露组件方法
defineExpose({
  show,
  showLoading,
  hideLoading
});
</script>

<style scoped lang="less">
.animate__animated.animate__fadeIn {
  --animate-duration: 0.5s;
}

.animate__animated.animate__fadeOut {
  --animate-duration: 0.5s;
}

.root-box {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  background-color: rgba(0, 0, 0, .7);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;

  .wrap {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
}
</style>

指令开发

loading.js

import { createVNode, cloneVNode, render } from "vue";
import Loading from "@/components/Loading/index.vue"; // 引入loading组件

const VNode = createVNode(Loading);
const weakMap = new WeakMap();
const loadingMap = new WeakMap();

function setElPosition(el) {
  const position = weakMap.get(el);
  if (position !== "absolute" && position !== "relative") {
    el.style.position = "relative";
  }
}

export default {
  mounted(el, binding) {
    // 记录当前绑定元素的position
    weakMap.set(el, window.getComputedStyle(el).position);
    // 克隆一份loading元素,作用是当页面上有多个loading时，每个dom都维护一份属于自己的loading，不会冲突
    const loadingNode = cloneVNode(VNode);
    loadingMap.set(el, loadingNode);
    // 如果不是position: relative或者absolute，就设置为relative
    // 这里的目的是确保loading组件正确覆盖当前绑定的元素
    setElPosition(el);
    // 挂载当前节点
    render(loadingNode, el);
    // 初始化时值为true，主动开启loading，避免loading无效
    binding.value && loadingNode.component?.exposed.showLoading();
  },
  updated(el, binding) {
    const oldPosition = weakMap.get(el);
    const loadingNode = loadingMap.get(el);

    // 判断绑定的值
    if (binding.value) {
      loadingNode?.component?.exposed.showLoading();
    } else {
      loadingNode?.component?.exposed.hideLoading(() => {
        // 还原布局方式
        el.style.position = oldPosition;
      });
    }
  },
  unmounted(el) {
    // 页面卸载时，清除对应的dom记录
    weakMap.delete(el);
    loadingMap.delete(el);
  }
};

指令注册

全局注册

main.js

import { createApp } from "vue";
import App from "./App.vue";

import loading from "你的路径/loading.js"; // 加载指令

const app = createApp(App);

app.directive("loading", loading);

局部注册

import loading from "你的路径/loading.js"; // 加载指令

export default {
  setup() {
    /*...*/
  },
  directives: {
    // 在模板中启用 v-loading
    loading: loading
  }
}

页面引用

import loading from "你的路径/loading.js"; // 加载指令

export default {
  setup() {
    const show = ref(true);
    
    setTimeout(()=>{
      show.value = false;
    } , 1000)
    
    return {
       show
    }
  },
  directives: {
    // 在模板中启用 v-loading
    loading: loading
  }
}

<template>
  <p v-loading="show">loading组件实例</p>
</template>

<style>
 p {
     width: 100px;
     height: 100px;
 }
</style>