创意电子

标题: vue3.x全局$toast、$message、$loading等js插件 [打印本页]

作者: 杂学不精 时间: 2021-10-22 05:50
标题: vue3.x全局$toast、$message、$loading等js插件
有时候我们需要使用一些类似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)

欢迎光临创意电子 (https://wxcydz.cc/)