遮罩和下层的内容覆盖在了抽屉之上. 解决办法是修改append-to-body和modal-append-to-body属性,把抽屉插入至 body 元素上,把遮罩插入至抽屉的父元素上,具体代码: 代码语言:javascript 复制 <el-drawer:append-to-body="true":modal-append-to-body="false"></el-drawer> element官方的说明:...
在Element Plus 的 el-drawer 组件中,默认情况下,如果内容超出抽屉的高度,会自动启用滚动条。你可以通过以下步骤来确保滚动效果正常工作: 确保内容高度超出抽屉高度:这是触发滚动效果的前提条件。 使用append-to-body 属性:如果抽屉的内容比较复杂,或者需要确保抽屉的层级正确,可以使用 append-to-body 属性将抽屉挂载到...
背景:vue项目中多个el-drawer抽屉组件嵌套官方自带遮罩层出现顺序混乱的bug 使用了官方自带类 :append-to-body=“true” :modal-append-to-body=“false” 都无法解决后 自己定义了一个组件,虽然简陋但是解决了问题 最终展示效果 解决方案 使用:modal="false"将官方自带遮罩层关闭,在将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:015px!important; } :deep(....
背景:vue项目中多个el-drawer抽屉组件嵌套官方自带遮罩层出现顺序混乱的bug 使用了官方自带类 :append-to-body=“true” :modal-append-to-body=“false” 都无法解决后 自己定义了一个组件,虽然简陋但是解决了问题 最终展示效果 解决方案 使用:modal="false"将官方自带遮罩层关闭,在将el-drawer设置背景色,实现效果...
参考我的这篇文章,但是在后面我发现只要是会生成v-model元素的饿了么组件,在使用的过程中都可能出现整个页面被遮罩层挡住的情况,解决方法其实都一样. 比如在el-drawer组件里面也可以插入: :modal-append-to-body="false" 完美解决
歌谣2024-前端学习技术记录0221el-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"...
Steps to reproduce 1.visible绑定的dialog值初始化设置为 true; 2.设置属性 el-drawer组件append-to-body属性值 或者 modal-append-to-body属性值 值为true; 3.el-drawer组件渲染并没有插入至 body 元素上; What is Expected? el-drawer组件能渲染至 body 元素上 What is actually happening? el-drawer组件渲...
一、参数modal设置为false会导致弹窗无法正常展示 代码 <el-drawer title="我是标题" v-model="drawer" :direction="direction" :modal="false" :before-close="handleClose" destroy-on-close> <span>我来啦!</span> </el-drawer> 通过官网的调试功能,和目前我个人代码中的环境都会产生问题。
1<template>2<el-dialog3v-drag4v-fullScreen5:title="title"6:visible="visible"7:show-close="showClose"8:close-on-click-modal="closeOnClickModal"9:append-to-body="true"10close-on-press-escape11:modal="modal"12:width="`${device === mobile ? 100 : width}%`"13:top="`${device ===...