vue3_插件

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码

一个插件可以是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给 app.use() 的额外选项作为参数：

example：

const myPlugin = {
  install(app, options) {
    // 配置此应用
  }
}

示例：Loading状态插件

main.ts

import loading from './views/home/appuse/load'

app.use(loading)

load.ts

import { createVNode,App,VNode,render } from "vue";

import loading from './load.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()
        }
    }
}

load.vue

<template>
   <div v-if="isShow" class="loading">
        <div class="loading-content">Loading...</div>
    </div>
</template>

<script setup lang="ts">
import {ref,defineExpose} from 'vue'
const isShow = ref<boolean>(false)
const show = () =>{
    isShow.value = true
}
const hide = () =>{
    isShow.value = false
}
defineExpose({
    isShow,
    show,
    hide
})
</script>

<style scoped lang="less">
.loading {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    &-content {
        font-size: 30px;
        color: #fff;
    }
}
</style>

组件中使用

import {ref,getCurrentInstance,ComponentInternalInstance} from 'vue'
const {appContext} =  <ComponentInternalInstance>getCurrentInstance()
appContext.config.globalProperties._loading.show()
setTimeout(() => {
    appContext.config.globalProperties._loading.hide()
}, 2000);

小满zs vue3第三十章学习https://xiaoman.blog.csdn.net/article/details/123300264