关于 vue 页面内部有多个 dialog 应该如何优化?

Question

技术栈:vue+element-ui
比如我 A 页面有个 8 个 dialog 导致代码行数暴增到 2000 行
除了一个个拆封成单独的组件
还有没有什么优化管理的方式,求大佬明示!

Answer 1

对话框都是类似的吗？如果像查看详情、编辑、新增这些类似的对话框的话，其实可以共用一个对话框的，只要每次使用不同的数据就好了。多个对话框不类似的话我目前也没有优化方法。

Answer 2

一切都是配置，把需要的参数处理好就可以用一个dialog来完成。如果dialog里内容过多，差异过大，建议用多个。
举个例子：

dialogParams: {
   visible: false,
   obj: data, // 需要传的参数
   title: '编辑', 
   others1: '', 
   others2: ''
}

考虑到你有好多个dialog，标题直接传参更好，在组件内部判断反倒加重了组件了负担。 dialog组件专门处理8种不同情况的展示逻辑和内容就好。

最好把这8个再分组一下。这样内部控制逻辑会好很多。