elementUI弹窗被遮罩层覆盖

是了。

于 2022-06-02 00:29:59 发布

阅读量442

点赞数

CC 4.0 BY-SA版权

文章标签： elementui

本文链接：https://blog.youkuaiyun.com/a_cVa_c/article/details/125092813

本文介绍了在前端开发中，如何使用`append-to-body`和`modal-append-to-body`属性来控制Element UI的对话框（Dialog）组件的定位。通过设置`append-to-body`为`true`，可以将对话框放置于body元素内，避免了对话框层级问题。而`modal-append-to-body='false'`则用于改变遮罩层的定位，使其不随对话框移动。这两个属性对于优化对话框在复杂布局中的显示效果至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决方法

:append-to-body='true'
或者
:modal-append-to-body='false'

1. append-to-body(多个dialog)

<el-dialog
    title="dialog"
    :visible.sync="visible"
    append-to-body>
</el-dialog>

2.modal-append-to-body

<el-dialog
    title="dialog"
    :visible.sync="visible"
    :modal-append-to-body="false">
</el-dialog>