Vue 项目中，每个页面都有 2~3 个对话框，应该如何整理存放和复用？

[giter]

前端基于 Vue3 + Element Plus + Vite + TypeScript 。当前，每个页面都有类似于：详情对话框、编辑对话框和各种嵌套对话框等，该复用的已经复用过了，剩下的对话框都含有各自的特色内容，不宜复用，强行复用可能会导致单文件代码量过多不利于后期维护。

目前的疑问：我现在的做法是拆分每个 el-dialog 为单文件组件，存放到 components 文件夹下（可能有违 components 这个文件夹的定义，我的理解是 components 用来存放一些复用性很高的组件，而不是这种零散的对话框单组件文件）所以就导致我现在的项目结构很多 xxxDialog.vue 文件，既不知道如何归类存放，也不知道该怎么高效复用。

[giter]

@humbass 有了解过，但没深入了解，应该可行

[thevita]

本质应该算是后端的非主流半吊子前端来说下：

我会习惯按业务逻辑相关性来放, 不通用 但 一起完成某个相关业务逻辑的放一个目录下
如:

..../(some biz)/
..../(some biz)/list.vue
..../(some biz)/detail.vue
..../(some biz)/edit.vue
..../(some biz)/useHost.ts
..../(some biz)/popupList.vue
..../(some biz)/mergeToolDialog.vue
..../(some biz)/useBizLogic.ts -- ( 只是举个例子,一般还是会叫具体完成的事)

[giter]

@thevita 看过多个开源的前端项目，都是这样的，最主要的页面取名 Index.vue ，剩下的如详情对话框，就取名 detail.vue ，编辑对话框就取名 edit.vue

[CHTuring]

不需要考虑那么多复用的情况，components 文件夹你只需要放公用的组件就好了，比如你在 Element Plus 的 Dialog 组件二次封装了组件。其它的页面内业务 Dialog 直接放在对应路由页面下的 components 文件夹或者不需要文件夹，直接 xxDialog.vue 或 xxModel.vue 就好了。

[ruoxie]

components 放业务无关的拆出去的组件，containers 放包含各种业务逻辑的拆出去的组件

[CHTuring]

1 、约束文件夹、文件的路径和命名规则
2 、公共的 hooks 、utils 、组件的文档编写
3 、异步引入减少加载时常和页面体积
4 、测试（可选）

只要规范这三个，不管是什么前端项目基本都清晰可维护了

[LavaC]

对话框内容不多的话可以改成命令式调用的方法，传几个参数改改里面的字就够了。类似于 element 里的 this.$message 。
如果各有业务内容的话那分成多个组件也是没有办法的事，不用内疚。
业务特有的组件的话，我们公司的习惯是 views 下分页面，比如 foo 页面，如果 foo 页面下有专有组件就在 foo 文件夹下再建一个 components 文件夹，结构大概是这样
views/
foo/
components/
BarDialog.vue
index.vue

[LavaC]

@giter #21 不知道其他人是怎么解决的，我前几个月也尝试看看能不能将 dialog 改造成类似 model 一样的命令式调用，以减少页面上那一堆管理弹窗状态/传值的代码，现在用下来感觉还不错。

[giter]

@LavaC #28 谢谢，有时间一定得去研究一下

[anguiao]

我每个小模块会有自己的 components 文件夹，不是公用组件的话我就丢在这里面了。

[zogwosh]

还有一种方法,写一个文件叫 xxxModal.tsx,把这个页面的所有用到的 modal 文件放里面.

[nianyu]

@giter 你的页面 dialog 样式 功能 回调都不一样，全靠传参反而更麻烦。一个模块用一个挺好的

[nianyu]

你最后就算封装成一个组件了，该写的还是少不了，json 配置 table form 看过吗，其实你定义的 schema 跟直接写 html 没什么区别的。

[sjhhjx0122]

弹出层这个事情也是为难了我很久,写到最后还是命令式调用,更符合直觉,你看看我写的这个库找找灵感 https://vue-modal-provider.netlify.app/

[totoro52]

过度封装带来的后果是更难的维护和组件的膨胀

[giter]

@sjhhjx0122 谢谢，我研究一下你的代码

[connection]

首先弹窗组件的复用看功能，不从 ui 来划分复用。
然后是弹窗声明式编写，但是命令式调用。

[TimPeake]

我最讨厌那种页面拆分成 N 个组件的了....有想过后面接手兄弟的感受吗？得看这 N 个组件的属性传递、自定义方法等，对了，vscode 默认还不支持点击跳转到该文件，来回跳转头都大了... 真不如塞到一个页面里 。什么， 页面代码太长？那是你注释不清晰....分块集中写在一起也很好阅读

[sjhhjx0122]

@giter 我在写完这个库之后,就把弹窗当做页面,放在用弹窗的页面文件夹里,因为弹窗里面本身就承载像表单这种业务逻辑,只是他是命令调用不是当路由跳走的页面

[bojackhorseman]

我是拆组件，编辑和添加用一个组件，用 type 来区分，如果详情也是弹窗，相同的部分多的话就共用。