Vue3自定义插件实现全局Loading效果

我就是我 2023-10-10 21:03 54阅读 0赞

使用组件的形式，实现全局loading效果：![b7906307984e4513b9faa2fa6a0c5d48.gif][]

在项目中添加一个文件夹：plugin/loading，并新建一个loading.vue组件：![50628a9551ef4ac68570c49a42b46ba8.png][]

loading.vue组件代码：

<template>
      <div v-if="loading" class="loading">Loading</div>
    </template>
    
    <script setup lang="ts">
    import { ref } from 'vue'
    
    const loading = ref(false)
    
    const show = () => {
      loading.value = true
      console.log('show方法执行了')
    }
    
    const hide = () => {
      loading.value = false
      console.log('hide方法执行了')
    }
    
    defineExpose({
      show,
      hide
    })
    </script>
    
    <style scoped>
    .loading {
      position: fixed;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      width: 100vw;
      height: 100vh;
      opacity: 0.5;
      background-color: grey;
      color: white;
      z-index: 999;
    }
    </style>

新建一个index.ts插件文件：将loading组件加载进去，并且给vue对象全局挂载LOADING属性

import type { App } from 'vue'
    import { createVNode, render } from 'vue'
    import loading from './loadIng.vue'
    
    export default {
      install(app: App) {
        console.log('全局Loadig插件执行了')
        // 将vue组件转为VNode，然后渲染到页面上
        const VNode = createVNode(loading)
        render(VNode, document.body)
        // 给Vue对象全局挂载属性show、hide
        app.config.globalProperties.LOADING = {
          show: VNode.component?.exposed?.show,
          hide: VNode.component?.exposed?.hide
        }
        console.log('挂载点属性:', VNode.component?.exposed, app.config.globalProperties.LOADING)
      }
    }

在main.ts中挂载这个组件：![bca15ef1ac834271921bbd880040de36.png][]

并在main.ts中声明LOADING属性:

import './assets/main.css'
    
    import { createApp } from 'vue'
    import { createPinia } from 'pinia'
    import ElementPlus from 'element-plus'
    import 'element-plus/dist/index.css'
    import App from './App.vue'
    import router from './router'
    import loading from './plugin/loading'
    
    const app = createApp(App)
    
    app.use(createPinia())
    app.use(router)
    // 自定义插件全局loading
    app.use(loading)
    
    app.use(ElementPlus)
    // 定义全局变量和全局函数
    app.config.globalProperties.env = "dev"
    
    app.config.globalProperties.filter = {
      format<T>(content:T){
        return "格式化后的内容" + content
      }
    }
    
    // 解决Vue中的全局变量和函数报错问题
    interface Filter {
      format<T>(content:T):string
    }
    
    
    interface LOADING {
      show():null
      hide():null
    }
    
    
    declare module 'vue' {
      export interface ComponentCustomProperties {
        filter: Filter,
        env:string,
        LOADING:LOADING
      }
    }
    
    
    
    app.mount('#app')

然后在App.vue中引用这个插件：

<template>
      <div class="app">
        主页测试全局loading插件
        <button @click="showLoading">点击加载loading</button>
      </div>
    </template>
    
    <script setup lang="ts">
    import { getCurrentInstance } from 'vue'
    
    const app = getCurrentInstance()
    
    const showLoading = ()=>{
      // const app = getCurrentInstance()
      app?.proxy?.LOADING.show()
      console.log("点击了loading", app);
      // 5秒之后取消加载
      setTimeout(() => {
        app?.proxy?.LOADING.hide()
      }, 5000);
    }
    
    
    </script>
    
    <style scoped>
    .app{
      width: 100vw;
      height: 100vh;
      font-size: 30px;
      background-color: orange;
    }
    </style>

最后的效果就是：

![b7906307984e4513b9faa2fa6a0c5d48.gif][]

[b7906307984e4513b9faa2fa6a0c5d48.gif]: https://img-blog.csdnimg.cn/b7906307984e4513b9faa2fa6a0c5d48.gif
[50628a9551ef4ac68570c49a42b46ba8.png]: https://img-blog.csdnimg.cn/50628a9551ef4ac68570c49a42b46ba8.png
[bca15ef1ac834271921bbd880040de36.png]: https://img-blog.csdnimg.cn/bca15ef1ac834271921bbd880040de36.png