element抽屉el-drawer被其他内容覆盖的解决方法

最新推荐文章于 2025-03-04 15:11:37 发布

qq_44472859

最新推荐文章于 2025-03-04 15:11:37 发布

阅读量5.2k

点赞数 4

分类专栏：问题和解决方案文章标签： javascript vue js elementui

本文链接：https://blog.youkuaiyun.com/qq_44472859/article/details/113532138

版权

问题和解决方案专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在使用element-ui时遇到抽屉组件（el-drawer）被其他内容覆盖的问题，提供了解决方案。通过修改`append-to-body`和`modal-append-to-body`属性，将抽屉插入到body元素，而将遮罩插入到抽屉的父元素，从而避免了内容覆盖。详细代码和element官方说明可供参考。

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

element抽屉el-drawer被其他内容覆盖的解决方法

遮罩和下层的内容覆盖在了抽屉之上.

解决办法是修改append-to-body和modal-append-to-body属性，把抽屉插入至 body 元素上，把遮罩插入至抽屉的父元素上，具体代码：

    <el-drawer
      :append-to-body="true"
      :modal-append-to-body="false"
    ></el-drawer>

element官方的说明：

参数	说明	类型	可选值	默认值
append-to-body	Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true	boolean	—	false
–	–	–	–	–
modal-append-to-body	遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上	boolean	—	true