vue3+ts自定义全局插件之简单loading蒙版（个人笔记）

1.找个地方放这种vue插件，放在src/components 新建文件夹 loading包含一个文件夹types(用来存放约束或者导出) 一个loading.vue文件

2.types.ts内容

import { App, createVNode, render, VNode } from "vue";
// 自定义vue插件
import Loading from "../loading.vue"
export default {
    install(app: App) {
        const vNode: VNode = createVNode(Loading) //转成vnode
        render(vNode, document.body) //转成真实dom，第二个参数是挂载在哪里
        console.log(vNode.component?.exposed);  //打印插件声明内容
        app.config.globalProperties.$loading = {     // 全局挂载 如果报红,请使用declare 声明文件
            show: vNode.component?.exposed?.show,
            hide: vNode.component?.exposed?.hide,
        }
        // app.config.globalProperties.$loading.show() //测试效果
    }
}

3.loading.vue内容

<template>
  <!-- 自定义vue插件 -->
  <div class="loading" v-if="isShow">
    <div class="loading_content">Loading...</div>
  </div>
</template>

<script setup lang="ts">
let isShow = ref<boolean>(false);

const show = () => {
  //显示
  isShow.value = true;
  console.log("显示");
};
const hide = () => {
  //隐藏
  isShow.value = false;
  console.log("隐藏");
};
//将所有属性暴露出去
defineExpose({
  isShow,
  show,
  hide,
});
</script>

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

4.main.ts文件引入和挂载

import Loading from "./components/loading/types/types" //自定义插件引入 方便挂载

let app = createApp(App)
app.use(Loading)

app.mount('#app')

5.页面使用app.vue页面 直接使用即可，如果需要在setup使用则通过 getCurrentInstance获取当前实例的方式使用

<div>
 {{ $loading.show() }}
 </div>

6.效果