有时候我们需要使用一些类似toast，messge、loading这些跟js交互很频仍的插件，vue3.x这类插件的界说跟vue2.x插件稍大，而且相对变得复杂了一点点。
第一种、需要时创建，用完移除
这种做法相对损耗性能，当一些表现隐藏频率不是特别高的插件可以如此封装。
1、新建loading.vue文件
加载中...
.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; }2、同级目录新建index.js文件
import { createApp } from "vue"import Loading from './loading.vue'export default { instance: null, parent: null, times: 0, // 为了保证多个同时loading的时候，只表现一个，并且需要全部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 { this.$loading.close()}, 2000)第二种，一直存在，只控制表现隐藏
1、新建loading.vue文件
加载中...
.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; }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，导致获取不到app节点，所以想挂载到app上，需要保证app已经创建。 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、组件内使用
this.$loading.show()setTimeout(() => { this.$loading.hide()}, 2000) |
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
