vue中使用elementui的Dialog弹出框，组件如何编辑和新建共用一个弹框？

Question

每个组件里都要写Dialog，每个功能的新增、编辑等都要写一个组件，能不能做到所有组件复用一个Dialog弹框？

Answer 1

可以啊，配置数据就好了。大概就是每次显示弹框前，设置一下当前dialog配置数据
伪代码：

const DialogConfig = {
  curDialog: null,
  dialog1: {
    title: 'dialog1',
    message: '内容等',
  },
  dialog2: {
    title: 'dialog1',
    message: '内容等',
  },
};

methods: {
    hancleClick(name){
        DialogConfig.curDialog = DialogConfig[name]
    }
}

Answer 2

第一种, 你可以在跟组件中处理这种事件
第二种, 新增,编辑弹窗写成组件

Answer 3

我一般是定个装载id的变量，然后点编辑的时候，这个变量就不是0，弹窗判断id不是0的时候做渲染处理。

Answer 4

对于elementUI的弹窗不是很熟悉，不过之前使用iview开发也遇到类似的问题，应该也是差不多。我利用iview的Modal组件再封装了一个可复用的弹窗组件，思路就是利用vue-router，需要配置router.js，利用路由来跳转出现弹窗，弹窗里的内容是可diy的，根据传递的组件名（在query中传递）来决定弹窗组件里实际显示的内容组件。

Answer 5

现有解决方案是通过props传参,if判断，如

<my-dialog :is-edit="true",:edit-data="{name:'测试'}"/>