Modal 实现
然后又无意间刷到“Portal
”,才知道Modal
的实现还有如此妙的方式,顺而想着干脆把UI
组件库的实现原理看完。
1. Modal
弹窗的基本原理
我给弹窗类的定义是脱离固定的层级关系,不再受制于层叠上下文的组件。
常见的Modal
模态框、Dialog
对话框、Notification
通知框等都是最最常用的交互方式。
在我们页面有时需要一些特定的弹窗时,通过改UI
组件过于麻烦。
这时切图仔级别的会想:简单啊,创建一个<div/>
给绝对定位不就得了。
倘若只是当前路由页用,也还凑合。可一旦涉及到了组件复用以及抽象为声明式,就会有很大的隐患:
- 若无封装,组件代码需要处处粘贴。
- 即使封装了,都是在每个路由页下创建
<div/>
,易造成样式污染。 - 类购物车的弹窗,又该如何处理数据及渲染?
- 再进一步想,万一组件库会作为绩效考核,拿到每个环境都长得不一样,咋整?