-
Notifications
You must be signed in to change notification settings - Fork 270
组件 z index
ZhouZhen edited this page Dec 20, 2021
·
7 revisions
组件 | 建议 zIndex 范围 | 组件默认 zIndex |
---|---|---|
Affix | 500 ~ 600 | 500 |
Drawer | 1500 ~ 1600 | 1500 |
Dialog 对话框 | 2500 ~ 2600 | 2500 |
Loading 组件 | 3500 ~ 3600 | 3500 |
Message 消息 | 5000 ~ 5100 | 5000 |
Popup 弹框气泡 | 5500 ~ 5600 | 5500 |
Notification 消息通知 | 6000 ~ 6100 | 6000 |
- PC 端没有 Toast 组件,规划范围应该分开;
- Popup 组件 z-index 最高不太合理,PC 端 Dialog < Popup < Loading < Message 是否好一些?
第 1 点,已分开。
第 2 点,前提:Dropdown 组件基于 Popup 实现
比如,Dropdown 组件的某一项操作是点击后 弹框 Dialog。此时,期望 Dialog 层级 比 Popup 高。
但是另外一个场景:在 Dialog 弹框里面有个表单 Select 组件(基于 Popup 实现),此时又需要 Dialog 层级比 Popup 低
默认值没有绝对正解,业务侧可以根据 zIndex 自行设计层级关系
Popup/Drawer/Dialog 等组件可以尝试通过使用相同 zIndex 处理三者关系,先发生先显示,后发生后显示。相同层级使用 1500
vue-mobile组件的层级关系
组件 | 建议 zIndex 范围 | 组件默认 zIndex |
---|---|---|
Drawer 抽屉 (底层基于Popup) | 1500 ~ 1600 | 1500 |
Dialog 对话框(底层基于Popup) | 1500 ~ 1600 | 1500 |
Toast 组件 | 2000 ~ 2500 | 2000 |
Message 消息 | 5000 ~ 5100 | 5000 |
Popup 弹出层 | 1500 ~ 1600 | 1500 |
Drawer、Dialog组件底层是基于Popup实现的,移动端这里Popup < Dialog = Drawer < Toast < Message。不过感觉Dialog < Drawer应该更合理点?
访问 TDesign 官网