Vue3封装全局插件

定义一个全局加载组件

一、首先定义dom元素

定义一个index.vue文件

第二步给dom元素添加，控制显示的开关和方法，然后通过defineExpose暴露出去

二、把组件渲染到全局

定义一个index.ts把组件暴露出去

createVNode创建虚拟节点，render把节点渲染到body，然后创建一个全局变量方便操作$Loading

import type { App, VNode } from "vue"
import { createVNode, render } from 'vue'
import loading from './index.vue'
export default {
    install(app: App) {
        const Vnode: VNode = createVNode(loading);
        render(Vnode, document.body)
        app.config.globalProperties.$Loading = {
            show: Vnode.component?.exposed?.show,
            hide: Vnode.component?.exposed?.hide,
        }
    }
}

三、注册组件

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

const app = createApp(App)

type Lod = {
    show():void,
    hide():void
}

declare module 'vue' {
    export interface ComponentCustomProperties {
        $Loading: Lod
    }
}

app.use(loading)
app.mount('#app')

使用