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

mikechen
  • 748

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

回复
阅读 2.1k
2 个回答

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

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

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

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

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

宣传栏