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

[giter]

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

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

[zbowen66]

@LavaC #28 我之前也是这么写的，不过没有开源，我现在写 React 了，这是 React + antd 版的 https://bowencool.github.io/create-antd-modal/

[Genshin2020]

一样的技术栈，但是我把 element plus 中一个 input 组件就基于业务不同，封装了几十个业务组件，select 也是，封装了几十个，然后 form 表单是基于 一个配置信息 v-for 渲染出来的，用动态组件。

什么业务逻辑都在业务组件中封装好，校验什么的，核心就是只关注入参和出参，写好文档。

而表单配置信息，你乐意写在一个 config.ts 里都行，或者直接写在 index.vue 同级目录下。

[lingyired]

分情况，如果这个 dialog 的显示内容不需要特殊的布局和排版以及内容，那么可以使用命令式调用, 把 title, content ，buttons 传递进去。比如单纯的 alert, confirm 等。

对于需要特殊布局，然后还有数据驱动的，甚至是一些逻辑的，才抽离成一个 vue 组件。

[umaker]

我认为关键在于你如何定义 dialog 的多于少。
如果一个页面或者整个项目里要使用的 dialog 数量（按类型计算）会以数量级的方式增加，比如这次需求有 2 个弹窗，下次需求就可能加到 20 个或者更多，这种情况，是需要考虑如何从项目顶层设计才能更好地承载这样的业务模式；
如果只是递增形式的变多，那只是业务需求而已，按照需求的描述，做好基本的代码管理就可以了。
什么是好代码？不要让维护者看不懂你的代码就是好代码。

[crazyTanuki]

弄个 modalConfig.js 进行集中配置,自己二次封装太麻烦了

[cenbiq]

products
└─ components
├─ product-edit.vue
└─ product-view.vue
├─ product-details.vue
└─ product-list.vue

[cenbiq]

```

[SixGodHave7]

当前页面路径下开个 components 文件夹

[MENGKE]

```
xxx
└─ index.vue
└─ components
└─ xxxCreateDialog.vue
└─ xxxEditDialog.vue
└─ ...
```

[zzwyh]

@TimPeake vscode 支持点击跳转文件的

[we21x]

组织结构
-UserList
- components
- UserInfoDialog.vue
UserList.vue

封装
Ref + Promise 封装成类似 ElMessageBox.confirm 的 Promise 化的 Dialog
大概思路： https://editor.csdn.net/md/?articleId=134161250

[davin]

业务类的一般都放在 business 文件夹，和 components 文件夹相同级别

[tog]

你这个场景 很适合插槽，如果是我的的话，就用插槽+组件的形式， 手动狗头~

[iMiata]

比较推荐 #49 楼的结构

[qwas]

组件也可以分为通用组件和页面组件的啊
src
└─ components
└─ views
└──── view-a
└──── components

[JohnH]

这是我目前的开发方式。
1.图中可见有个路由 /company/index, /company/edit, /company/detail 。在 company 下的 components 是抽离出来的独立性比较高的组件，也被其他几个路由少量引用
2.investment 是我目前思路的典型做法。
- data.ts 用于本模块下提供一些共用的局部字典什么的
- 各目录下的 vue 一定是在 router 中定义的，components 内的除外
- components 下的永远不会被路由直接访问，是供页面引用的组件
- 从相应页面拆分出来的组件，以页面名称为前缀

[Cheez]

两种方法，使用 JSON Schema 。使用 useDialog() 函数

[rm0gang0rf]

文件夹套文件夹别的啥都不方便

[giter]

@rm0gang0rf yes

[trokix]

感觉，你是需要函数式组件