这个标题可能很拗口,请允许我先做下简短的解释。
在我们使用 Vue 进行开发时,Dom 最终渲染的结构与 template 嵌套逻辑是一致的,有着严格的父子级关系。
假如我们有特殊需求,需要将某个 viewModel 的 Dom 渲染到父级之外,需要如何操作?
一、真的有这种需求 ?
可能你在看了前面介绍之后会觉得很奇怪,也意识到自己的开发经验里从来没有过这样的需求。
什么样的场景才会需要转移 Dom 呢 ?
如果你有过 UI 组件开发的经验,可能会发现,随着模块划分越来越细,模块层级越来越深,某些组件的 Dom 并不适合渲染在自身所属的 Dom 上。
比如常见的返回顶部按钮,悬浮广告,还有下面三个更生动的例子。
对话框
右键菜单
用户提示组件
花十秒钟想一下这些组件有什么样的特点 ?
开始
10
9
8
7
6
5
4
3
2
1
结束
这些模块都属于用户交互组件,并不属于页面静态布局的一部分,需要用户的操作来唤醒。
并且受限于页面各个层级的 overflow 设置,如果嵌入结构过深很容易导致渲染不完整。z-index 管理也会更加混乱,并且高频的创建、销毁也会引起不必要的局部重绘。
因此在开发 UI 用户交互组件的时候,如果有必要,可以考虑将 Dom 转移到组件外部,可能更便于管理。
二、遇到了什么蛋疼的功能?
之所以会思考这个问题,是因为最近小剧所在的团队正在开发一款新产品, 暂时不方便透露具体的产品名,等到上线后再找机会和你聊一聊。
因为产品的交互特性需要「右键菜单」的功能,按照惯例开始在 Npm 上找前人发布的开源包。可能在 API 支持程度、组件初始化方式上都和预期差异较大,所以便决定了自己开发一款右键菜单组件。
还好小