Skip to content

设计决策

本文假定你已读完侧栏「基础」各章。若还没走过 快速上手用模板填写插槽,请先读那些。

本篇说明 vue-layerx 为什么是现在这副样子:为何拆容器与内容、为何内容可以配置容器、为何使用方还能覆盖。弄清这些,对理解后续内容会更有帮助。

为何拆容器与内容

内容本质上是业务模块:表单、详情、筛选面板。它应当大体上与 Dialog / Drawer / Popup 无关——才能嵌在页面里,也能换容器打开。

容器只负责显隐、遮罩、标题栏等。vue-layerx 编排的是「容器 × 内容」,而不是再造一套 Modal。

为何内容可以配置容器

一份可复用的内容,作为弹层打开时通常还有默认契约:标题、宽度、哪些事件该关层等。这些跟这份内容绑定,而不是跟某一个调用页绑定。

因此允许在内容里用 defineLayer 声明容器侧默认(以及默认 closeOn)。内容仍然是普通组件:完成业务只 emit,不去调 close();容器的默认表现跟内容文件放在一起,换调用方也能带着走。

若这些只写在各个 open / 业务页上,契约会散落,复用时容易漏、容易漂移。

为何使用方还能覆盖

默认不等于终局。当次要改标题、项目要统一宽度、某次打开不想点遮罩就关——调用方必须还能盖过前面的默认。

所以 createLayerdefineLayeruseDialogopen 都可以写配置。需要「合并完仍按项目约定钉死」时,再用 adapter

下一步

默认跟内容走、使用方又能盖,同一项配置就会出现在好几个地方——「标题到底听谁的」见 配置如何合并

MIT Licensed