vue3+antdv 自定义v-loading指令

@/directives/loading/index

import { createApp } from 'vue'

const relativeClass = 'loading-relative'
import {Spin as Loading} from "ant-design-vue"

export default {
  name: 'myLoading',
  mounted(el, binding) {
    console.log(el.getAttribute("loading-text") )
    const tip = el.getAttribute("loading-text") || '页面加载中...'
    const app = createApp(Loading,{
      tip
    })
    const instance = app.mount(document.createElement('div'))
    console.log('instance: ', instance.$el)
    const name = Loading.name
    if (!el[name]) {
      el[name] = {}
    }
    el[name].instance = instance
    if (binding.value) {
      append(el)
    }
  },
  updated(el, binding) {
    const name = Loading.name
    if (!el[name]) {
      el[name] = {}
    }
    if (binding.value !== binding.oldValue) {
      binding.value ? append(el) : remove(el)
    }
  },
}
function append(el) {
  const style = getComputedStyle(el)
  const name = Loading.name
  if (['absolute', 'fixed', 'relative'].indexOf(style.position) === -1) {
    if (!el.classList.contains(relativeClass)) {
      el.classList.add(relativeClass)
    }
  }
  el.appendChild(el[name].instance.$el)
}
function remove(el) {
  const name = Loading.name
  el.classList.remove(relativeClass)
  el.removeChild(el[name].instance.$el)
}

css

.loading-relative {
  position: relative;
  z-index: 2001;
  height: 100%;
  width: 100%;
  .ant-spin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2003;
  }
  &::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(25, 25, 25, 0.1);
    z-index: 2002;
  }
}

最后在main.ts 进行注册

import loading from '@/directives/loading/index'
app.directive(`loading`, loading)

Ok