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

张伟国
  • 17

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

回复
阅读 13.5k
5 个回答

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

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

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

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

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

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

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

<my-dialog :is-edit="true",:edit-data="{name:'测试'}"/>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏