有時(shí)候我們需要使用一些類似toast，messge、loading這些跟js交互很頻繁的插件，vue3.x這類插件的定義跟vue2.x插件稍大，而且相對變得復(fù)雜了一點(diǎn)點(diǎn)。

第一種、需要時(shí)創(chuàng)建，用完移除

這種做法相對損耗性能，當(dāng)一些顯示隱藏頻率不是特別高的插件可以如此封裝。
1、新建loading.vue文件

<template>
  <div class="loading">
    加載中...
  </div>
</template>

<script>
  export default {
    name: "loading",
  }
</script>

<style scoped>
  .loading {
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    padding: 8px 10px;
  }
</style>

2、同級目錄新建index.js文件

import { createApp } from "vue"

import Loading from './loading.vue'

export default {
  instance: null,
  parent: null,
  times: 0, 
  // 為了保證多個(gè)同時(shí)loading的時(shí)候，只顯示一個(gè)，并且需要全部close之后才消失
  open() {
    if (this.times == 0) {
      this.instance = createApp(Loading)
      this.parent = document.createElement("div")
      let appDom = document.getElementById('app')
      appDom.appendChild(this.parent)
      this.instance.mount(this.parent)
    }
    this.times ++
  },
  close() {
    this.times --
    if (this.times <= 0) {
      this.times = 0
      let appDom = document.getElementById('app')
      this.instance.unmount(this.parent)
      appDom.removeChild(this.parent)
    }
  }
};

3、插件全局引入

import loading from '@/components/loading/index'
app.config.globalProperties.$loading = loading;

當(dāng)然步驟2可以拋出install函數(shù)，然后main.js里面用use來全局載入。這樣使用會(huì)導(dǎo)致我們不能使用this的地方不太好調(diào)用loading。

4、組件內(nèi)使用

this.$loading.open()
setTimeout(() => {
  this.$loading.close()
}, 2000)

第二種，一直存在，只控制顯示隱藏

1、新建loading.vue文件

<template>
  <div class="loading" v-show="visible">
    加載中...
  </div>
</template>

<script>
  export default {
    name: "loading",
    data() {
      return {
        visible: false
      };
    },
    methods: {
      show() {
        this.visible = true
      },
      hide() {
        this.visible = false
      }
    }
  }
</script>

<style scoped>
  .loading {
    position: fixed;
    left: 50%;
    top: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    padding: 8px 10px;
  }
</style>

2、同級目錄新建index.js文件

import { createApp } from "vue"

import Loading from './loading.vue'

export default {
  loading: null,
  install(Vue) {
    if (this.loading) {
      // 防止多次載入
      Vue.config.globalProperties.$loading = this.loading;
      return ;
    }
    let instance = createApp(Loading);
    let parent = document.createElement("div")
    let bodyDom = document.body
    // 這里需要注意，大概率app還沒有mount，導(dǎo)致獲取不到app節(jié)點(diǎn)，所以想掛載到app上，需要保證app已經(jīng)創(chuàng)建。
    bodyDom.appendChild(parent)
    this.loading = instance.mount(parent)

    Vue.config.globalProperties.$loading = this.loading;
  }
};

3、插件全局引入

import Loading from '@/components/loading/index'
app.use(Loading)

4、組件內(nèi)使用

this.$loading.show()
setTimeout(() => {
  this.$loading.hide()
}, 2000)

setup內(nèi)使用

import { getCurrentInstance} from 'vue'

setup() {
  const { proxy } = getCurrentInstance();
  return {
    loadingEvent: () => {
      proxy.$loading.show()
      setTimeout(() => {
        proxy.$loading.hide()
      }, 2000)
    }
  }
}

vue3.x全局插件和組件