vue 全局弹窗组件封装

1. 新建弹窗组件页

在公共部分文件夹(components)新建弹窗页面FreeUse.vue

2. 新建index.js挂载弹窗页面

index.js

import Vue from "vue";
import FreeUse from "@/components/dialog/FreeUse"; // 弹窗页面路径
const FreeUseBox = Vue.extend(FreeUse);

FreeUse.install = function(options) {
  let instance = new FreeUseBox({
    data: options,
  }).$mount();

  document.body.appendChild(instance.$el);

  Vue.nextTick(() => {
  		//
  });
};

export default FreeUse;

3. 在main.js中挂载弹窗组件index.js

// 引入弹窗组件
import FreeUse from "@/components/dialog/index";	//挂载弹窗的js路径
Vue.prototype.$FreeUse = FreeUse.install;

4. 在页面使用this.$xxx来调用弹窗

// openDialog: 事件
// FreeUse: 弹窗组件名字
openDialog(){
     this.$FreeUse({
      open: true    // open: :visible.sync="open"
   })
}