Bug Type: Component
Environment
- Vue Version:
3.4.21 - Element Plus Version:
2.6.1 - Browser / OS:
任意 - Build Tool:
Vite
Reproduction
Related Component
el-selectel-color-pickerel-date-pickerel-dropdownel-drawer
Reproduction Link
Steps to reproduce
让弹窗中的 Select 聚焦，并显示其弹出层
What is Expected?
弹出可以放置于手动指定的任意元素中，例如 元素，或者 popover 中，以便 标签、popover 元素中能够合理显示弹出层
What is actually happening?
只能放置于组件内或 上
Additional comments
(empty)
6条答案
按热度按时间fcy6dtqo1#
el-select 等组件是 z-index 模拟出的层级，而原生 dialog 会创建 top-layer 顶层层级，这是无法通过修改 z-index 高于它的。所以不建议原生 dialog 与组件共用，建议使用 el-dialog。
lndjwyie2#
---- 回复的原邮件 ---- | 发件人 | ***@***.***> | | 日期 | 2024年03月18日 15:09 | | 收件人 | ***@***.***> | | 抄送至 | ***@***.***>***@***.***> | | 主题 | Re: [element-plus/element-plus] [Component] 在 HTML 的 标签中，Select 等组件可能无法正常显示 (Issue #16156) | el-select 等组件是 z-index 模拟出的层级，而原生 dialog 会创建 top-layer 顶层层级，这是无法通过修改 z-index 高于它的。所以不建议原生 dialog 与组件公用，建议使用 el-dialog。 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>
zyfwsgd63#
能到使 teleported 属性或新增属性，支持传入特定网页元素，将内容插入到指定元素中？…
---- 回复的原邮件 ---- | 发件人 | ***@***.***> | | 日期 | 2024年03月18日 15:09 | | 收件人 | ***@***.***> | | 抄送至 | ***@***.***>***@***.***> | | 主题 | Re: [element-plus/element-plus] [Component] 在 HTML 的 标签中，Select 等组件可能无法正常显示 (Issue #16156) | el-select 等组件是 z-index 模拟出的层级，而原生 dialog 会创建 top-layer 顶层层级，这是无法通过修改 z-index 高于它的。所以不建议原生 dialog 与组件公用，建议使用 el-dialog。 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>
gg0vcinb4#
dialog 创建的 top-layer 不在 document 中，没有办法超过这个浏览器级别的层级。
qxgroojn5#
可以给 dialog 本身加上 overflow: visible 样式。Demo
kmbjn2e36#
但是，dialog 内部有元素必须
overflow: auto，且el-select是在此元素内部…---- 回复的原邮件 ---- | 发件人 | ***@***.***> | | 日期 | 2024年03月18日 16:16 | | 收件人 | ***@***.***> | | 抄送至 | ***@***.***>***@***.***> | | 主题 | Re: [element-plus/element-plus] [Component] 在 HTML 的 标签中，Select 等组件可能无法正常显示 (Issue #16156) | 可以给 dialog 本身加上 overflow: visible 样式。Demo — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>