vue3 naiveui 自定义v-loading指令

1.在sr目录下创建loading文件夹,包含index.ts和index.vue

2.index.ts

import { render, VNode, createVNode } from 'vue'
import Loading from './index.vue'
const vnode: VNode = createVNode(Loading) as VNode

export const vLoading = {
  // 在绑定元素的父组件 及他自己的所有子节点都挂载完成后调用
  mounted: (el: HTMLElement, binding: any) => {
    render(vnode, el)
  },
  // 在绑定元素的父组件 及他自己的所有子节点都更新后调用
  updated: (el: HTMLElement, binding: any) => {
    if (binding.value) {
      vnode?.component?.exposed.show()
    } else {
      vnode?.component?.exposed.hide()
    }
    // 动态添加删除自定义class: loading-parent
    formatterClass(el, binding)
  },
  // 绑定元素的父组件卸载后调用
  unmounted: () => {
    vnode?.component?.exposed.hide()
  },
}
function formatterClass(el: HTMLElement, binding: any) {
  const classStr = el.getAttribute('class')
  const tagetClass: number = classStr?.indexOf('loading-parent') as number
  if (binding.value) {
    if (tagetClass === -1) {
      el.setAttribute('class', classStr + ' loading-parent')
    }
  } else if (tagetClass > -1) {
    const classArray: Array = classStr?.split('') as string[]
    classArray.splice(tagetClass - 1, tagetClass + 15)
    el.setAttribute('class', classArray?.join(''))
  }
}

参数详情参考官网:自定义指令 | Vue.js 

3.index.vue

4.在main.ts中全局引入

import { createApp } from 'vue'
import App from './App.vue'

import { vLoading } from '@/directive/loading/index'
const app = createApp(App)
app.directive('loading', vLoading)

......

5.在任意组件中使用

const loading = ref(false)

onMounted(() => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  })
})