用全局api的形式实现this.$dialog

一、新建index.vue,编写显示层。

2、新建index.j文件，用于显示层的显示。

//1、导入vue
import Vue from "vue";

// 2、渲染组件
export default function create(Component, props) {
const vm = new Vue({
render: h=>(Component, props)
}).$mount();

// 3、挂载到根节点上
document.body.appenChild(vm.$el)

const comp = vm.$children[0]

comp.remove = () => {
    document.removeChild(vm.$el)
   vm.$destory()
 }
}

3、创建dialog.js引入对应的文件，使用install方法插件安装到全局

import create from './index.js';
import Dialog from './index.vue';

export default {
install(Vue) {
    Vue.prototype.$dialog = (props) => {
      const comp = create(Dialog, props)
      comp.show()
      return comp
    }
  }
}

4、在main.js文件中引入插件并使用

import Dialog from './dialog.js

Vue.use(Dialog)

5、使用

this.$dialog({
   title: "dialog",
   message: "dialog弹层",
});

效果入下，三秒以后自动消失

image.png