Vue portal

最近看了下 vue3 的新 feature，里面讲到了一个新的模版 tag——Portal （传送门）。顾名思义，它能将某个节点传送到 DOM 树的任意位置。今天就讲讲传送门这个小知识。 Vue Portal Dialog 我们在写 html 时，一般会自上而下地显示模块，不过某些小控件——如 Dialog、notification、popup——却是脱离固定的层级关系显示的。 Dialog 我们写一个名为Contract的小样例。为它的 Reject 操作做 double check：点击Reject按钮后，会弹出对话框告知用户确认之前的操作。该对话框是页面居中对齐，会脱离上下文布局。实现倒不难，CSS 设置position:fixed，然后再给z-index赋一个很大的值。 但是！这种实现导致的副产品贻害无穷——z-index开始被滥用了。在某些项目里，你会遇到这样的情况：无论怎么调整z-index大小，目标模块都不会出现在期望的位置上了——原因见内容布局（一）：position 布局。我刚开始学写 CSS 时，经常被z-index恶心到，大概稍微有点经验的前端开发都会有类似的体验。 之后，我记得在 jQuery 年代，人们已经把 Dialog 统一放到底部了。好处是统一管理：不再受z-index层叠上下文的影响，还能共用一套 CSS 背景处理。缺点也很明显，dialog 的数据往往是动态渲染的，与关联模块的通信只能交由总线完成，也就是把 CSS 的管理成本转嫁给了 JS。 上述两方案都是两难选择： dialog 与相关联的模块放在一起，数据绑定比较简单，但是 DOM 上下文会影响 CSS 效果 dialog 统一放在底部，CSS 影响变小了，但是“远程通信”的代码量上去了 有没有更优雅的解决方案呢？有，Portal！ Portal Vue3 会原生支持 Portal，但是现在毕竟还在 Vue2 年代，我们只能使用一个叫portal-vue的三方插件。安装如下： yarn add portal-vue 然后在入口文件使用该插件： import PortalVue from 'portal-vue' Vue.use(PortalVue) 使用方法也非常简单：在传送门入口内编写组件，绑定数据；页面渲染后，的内容会被镜像到了传送门出口处。

This slot content will be rendered wherever the 'portal-target' with name 'destination' is located.

Portal，传送门这个词还是很贴切的。再回到示例代码Contract上：

Reject

Are you sure?

Yes No

我们把对话框包在里，放到底部。这样对话框内的数据和事件可以与就近的contract模块绑定；而渲染后的镜像位于底部，CSS 不会受contract层叠上下文影响。非常优雅地解决了上述的两难问题。 Stepper 除了经典的 Dialog，portal 还可以应用到其他场景里。下图截取至 UI 库vuetify的组件。 Stepper 该组件我用过几次，功能非常完善，代码量也不小；所以在实现时我把每一步的stepper-content——滑动卡片——抽取到了不同嵌套层级的 vue 组件内。但是（又是但是），每一步stepper-content内的交互操作却要影响全局——如上accept、confirm、finish这些按钮会修改全局的stepper值。 我们自可以通过props-$emit或是 vuex 传递事件。然而写这种代码，不仅啰嗦，而且会有一种纯粹的“割裂感”。后来，我想了一下，完全可以把这些按钮统一放置，再由镜像到特定的stepper-content内；按钮布局便由所在组件分头处理，而事件响应则交由统一管理。实现上有点类似 Dialog 的反向“传送”。 小结 All in all, Portal 是一种给外部模块渲染 DOM的操作；这种设计很巧妙地分离了布局和事件，我第一次看到时也是眼前一亮。 前段时间和人八卦“追新”的话题。具体问题自然要具体分析，但我个人更倾向于尽早跟上潮流。技术发展并不仅仅是增加些语法糖，更多时候是一种理念的提升。Vue3 就加入了许多时新理念，虽然语法上依旧兼容 Vue2，但我这种老年开发再去看示例代码，已经是沧海桑田了。 相关 内容布局（一）：position 布局 文章同步发布于an-Onion 的 Github。码字不易，欢迎点赞。

本文章由javascript技术分享原创和收集