封装一个函数式调用的el-dialog弹窗组件

// dialogPlugin.js  
import Vue from 'vue';  
import { Dialog } from 'element-ui';  
  
let DialogConstructor = Vue.extend(Dialog);  
  
let dialogInstance = null;  
  
function showDialog(options) {  
  // 如果已经存在一个Dialog实例，则先关闭它  
  if (dialogInstance && dialogInstance.close) {  
    dialogInstance.close();  
  }  
  dialogInstance = new DialogConstructor({  
    propsData: {  
      title: options.title || '提示',  
      visible: true,  
      width: options.width || '50%',  
      // 其他你需要的props属性...  
    },  
  });  
  // 挂载到body上  
  let div = document.createElement('div');  
  document.body.appendChild(div);  
  dialogInstance.$mount(div);  
  // 添加关闭事件监听，以便在关闭后销毁实例  
  dialogInstance.$once('update:visible', (newVal) => {  
    if (!newVal) {  
      dialogInstance.$destroy();  
      document.body.removeChild(div);  
      dialogInstance = null;  
    }  
  });  
  // 返回Dialog实例以便外部可以调用它的方法（比如：确认、关闭等）  
  return dialogInstance;  
}  
  
// 导出showDialog方法以便在其他地方使用  
export default showDialog;

<template>  
     <button @click="a">点击我触发A组件的方法</button>
  </template>  
    
  <script>  
 
 import Vue from 'vue';  
import ElementUI from 'element-ui';  
import 'element-ui/lib/theme-chalk/index.css'; // 引入Element UI样式文件  
import showDialog from './d'; // 引入你封装的showDialog方法  
  
Vue.use(ElementUI); // 使用Element UI库  
Vue.prototype.$showDialog = showDialog; // 将showDialog方法挂载到Vue的原型上，以便在任何组件中都可以使用this.$showDialog()来调用它。

  export default {  
    methods:{
        a(){
              this.$showDialog({ title: '自定义标题', width: '30%' }); // 使用自定义的标题和宽度打开对话框。 
        }
    }
  }  
  </script>