内容不滚动:确保内容的高度超出了抽屉的高度,并且没有通过 CSS 强制禁止滚动。 滚动条位置不正确:如果使用了 append-to-body 属性,确保抽屉的样式(如 z-index)没有与其他元素冲突。 滚动条样式不一致:可以通过 CSS 自定义滚动条的样式,以匹配你的设计需求。示例...
遮罩和下层的内容覆盖在了抽屉之上. 解决办法是修改append-to-body和modal-append-to-body属性,把抽屉插入至 body 元素上,把遮罩插入至抽屉的父元素上,具体代码: 代码语言:javascript 复制 <el-drawer:append-to-body="true":modal-append-to-body="false"></el-drawer> element官方的说明:...
在el-drawer标签中加入 :append-to-body="true" 在el-dialog标签中加入 append-to-body
抽屉el-drawer 底层有遮罩问题 <el-drawer :title="sourceData.name1":visible.sync="drawer"direction="ltr":before-close="handleClose":modal="false":append-to-body="true"class="drawerC"> </el-drawer>data() { return { drawer: false, } } :deep(.el-drawer__open .el-drawer.ltr) {padding...
背景:vue项目中多个el-drawer抽屉组件嵌套官方自带遮罩层出现顺序混乱的bug 使用了官方自带类 :append-to-body=“true” :modal-append-to-body=“false” 都无法解决后 自己定义了一个组件,虽然简陋但是解决了问题 最终展示效果 解决方案 使用:modal="false"将官方自带遮罩层关闭,在将el-drawer设置背景色,实现效果...
子组件代码 <template> <el-drawer :title="title" :visible.sync="visible" :size="width" :close-on-click-modal="false" :close-on-press-escape="pressEscape" append-to-body :direction="direction" :destroy-on-close="destroyOnClose" @closed="handleClose" ...
1、根据需要,需要在下面窗口里弹出抽屉组件,但出现遮挡问题,如下: <el-dialog :title="designerData.name" :visible.sync="designerOpen" append-to-body fullscreen><dd-designer:key="designerOpen"style="border:1px solid rgba(0, 0, 0, 0.1);"ref="ddDesigner"v-loading="designerData.loading":designer...
背景:vue项目中多个el-drawer抽屉组件嵌套官方自带遮罩层出现顺序混乱的bug 使用了官方自带类 :append-to-body=“true” :modal-append-to-body=“false” 都无法解决后 自己定义了一个组件,虽然简陋但是解决了问题 最终展示效果 解决方案 使用:modal="false"将官方自带遮罩层关闭,在将el-drawer设置背景色,实现效果...
Element UI version 2.11.1 OS/Browsers version window10,chrome 70 Vue version 2.6.10 Reproduction Link https://jsfiddle.net/_ihhu/31mkqvLe/4 Steps to reproduce 1.visible绑定的dialog值初始化设置为 true; 2.设置属性 el-drawer组件append-to-body属性值 或者 mod
Build Tool:Vite Reproduction Related Component el-drawer Reproduction Link Element Plus Playground Steps to reproduce 无 What is Expected? class在drawer上生效 What is actually happening? class只有在drawer外部且append-to-body=false才生效 Additional comments...