vue 全局d窗组件封装

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

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

index.js

import Vue from "vue";
import FreeUse from "@/components/dialog/FreeUse"; // d窗页面路径
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中挂载d窗组件index.js

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

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

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