Vue 如何挂载全局弹窗

创建 index.vue 文件。

<template>
  <el-drawer 
    :visible.sync="showDialog" 
    :append-to-body="true"
    :close-on-click-modal="false" 
    :close-on-press-escape="false" >
  </el-drawer>
</template>
 
<script>
 
  export default {
    name: 'PopupBox',
    props: {
      popupItem: {
        type: Object | Array,
        require: false,
        default: () => {}
      },
    },
    data() {
      return {
        showDialog: false
      }
    },
    methods: {
      open() { 
        this.showDialog = true 
      },
    }
  };
 
</script>

创建 index.js。

import Dialog from './index.vue';
import store from '@/store'
import i18n from '@/utils/lang/index' //lang i18n
 
const dialog = {};
 
dialog.install = (Vue) => {
  const DialogConstructor = Vue.extend(Dialog);
  // 添加实例方法，以供全局进行调用
  Vue.prototype.$kfDialog = {
    open(data)  {
      const instance = new DialogConstructor({store, i18n, data});
      instance.$mount();
      document.body.appendChild(instance.$el);
      Vue.nextTick(() => {
        instance.open();
      });
      return instance;
    }
  }
};
 
export default dialog;

注意❗

注意 store 和 i18n 的注入。

在 main.js 中注册。

import Dialog from '@/components/RightContainer/PopupBox/index'
Vue.use(Dialog);

扩展阅读

• 用Vue3.0 写过组件吗！如果想实现一个 Modal你会怎么设计！
• 选项-组合
• Modal.js
• Vue封装全局注册弹窗组件，实现全局调用。