有時(shí)候我們需要使用一些類(lèi)似toast蛉签，messge胡陪、loading這些跟js交互很頻繁的插件，vue3.x這類(lèi)插件的定義跟vue2.x插件稍大碍舍，而且相對(duì)變得復(fù)雜了一點(diǎn)點(diǎn)督弓。
第一種、需要時(shí)創(chuàng)建乒验，用完移除
這種做法相對(duì)損耗性能愚隧，當(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狂塘、同級(jí)目錄新建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來(lái)全局載入了嚎。這樣使用會(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呐伞、同級(jí)目錄新建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還沒(méi)有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)
}
}
}
