vue3自定义v-loading指令

js
import { createApp } from 'vue'
import Loading from '@/components/Loading/index.vue'
 
const relativeCls = 'loading-parent--relative'
 
const loadingDirective = {
  name: 'loading',
  mounted(el, binding) {
    const app = createApp(Loading)
    const instance = app.mount(document.createElement('div'))
 
    el.instance = instance
 
    if (binding.value) {
      if (typeof binding.value === 'boolean') append(el)
    }
  },
 
  updated(el, binding) {
    if (binding.value !== binding.oldValue) {
      if (typeof binding.value === 'boolean') {
        binding.value ? append(el) : remove(el)
      }
    }
  },
}
 
function append(el) {
  const style = getComputedStyle(el)
  if (['absolute', 'fixed', 'relative'].indexOf(style.position) === -1) {
    addClass(el, relativeCls)
  }
 
  el.appendChild(el.instance.$el)
}
 
function remove(el) {
  removeClass(el, relativeCls)
  el.removeChild(el.instance.$el)
}
 
export function addClass(el, className) {
  // 如果当前元素样式列表中没有className
  if (!el.classList.contains(className)) {
    el.classList.add(className)
  }
}
 
export function removeClass(el, className) {
  el.classList.remove(className)
}
 
export default loadingDirective

js
<script setup></script>
 
<template>
  <div class="loading">
    <van-loading color="#1989fa" />
  </div>
</template>
 
<style lang="scss" scoped>
.loading {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9;
  backdrop-filter: blur(1px);
}
</style>
 

js
import { createApp } from 'vue'
import App from './App.vue'
 
const app = createApp(App)
app.directive('loading', loadingDirective)