快捷導(dǎo)航

Vue3自定義插件實現(xiàn)全局Loading效果過程

更新時間：2026年03月11日 16:07:53 作者：1024小神

文章介紹了如何在Vue項目中實現(xiàn)一個全局的loading效果,通過創(chuàng)建一個loading組件,并將其封裝成一個插件,在main.ts中進行全局掛載,使得在應(yīng)用的任何地方都可以通過`LOADING`屬性來控制loading狀態(tài),最后在App.vue中引用該插件,從而實現(xiàn)全局loading效果

使用組件的形式

實現(xiàn)全局loading效果：

在項目中添加一個文件夾

plugin/loading，并新建一個loading.vue組件：

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方法執(zhí)行了')
}

const hide = () => {
  loading.value = false
  console.log('hide方法執(zhí)行了')
}

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插件執(zhí)行了')
    // 將vue組件轉(zhuǎn)為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中掛載這個組件

在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)
// 定義全局變量和全局函數(shù)
app.config.globalProperties.env = "dev"

app.config.globalProperties.filter = {
  format<T>(content:T){
    return "格式化后的內(nèi)容" + content
  }
}

// 解決Vue中的全局變量和函數(shù)報錯問題
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>

最后的效果就是：