你不需要直接修改 el-drawer 组件的内部代码,只需要在使用 el-drawer 组件时,将 modal 属性设置为 false 即可。 vue <template> <el-button type="primary" @click="drawer = true">打开抽屉</el-button> <el-drawer title="抽屉标题" :visible.sync="drawer" :modal="false"...
一、参数modal设置为false会导致弹窗无法正常展示 代码 <el-drawer title="我是标题" v-model="drawer" :direction="direction" :modal="false" :before-close="handleClose" destroy-on-close> 我来啦! </el-drawer> 通过官网的调试功能,和目前我个人代码中的环境都会产生问题。 版本:^1.0.1-beta...
于是乎,关闭modal(本质上,只是遮罩层颜色透明了,还是会影响页面交互) 于是乎,我更改遮罩层宽度,做了一系列调整,使得遮罩层不会影响其他地方的点击! Element plus 的抽屉控件 <el-drawer v-model="drawer" title="I am the title" :with-header="false" :before-close="closeDrawer" :size=percentage :wrapper...
背景: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; ...
不过不幸的是el-drawer他的外层有一层遮罩(无论你有没有设置modal,modal为true是用el-overlay当遮罩,否则是一个div当遮罩),那么就需要绕过这个遮罩去进行页面上的交互,这有一个css属性可以做到pointer-events:none;,el-drawer有一个属性叫modal-class,可以给外层遮罩设置class,我们可以使用这两个结合处理下,让外层...
背景: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" ...
遮罩和下层的内容覆盖在了抽屉之上. 解决办法是修改append-to-body和modal-append-to-body属性,把抽屉插入至 body 元素上,把遮罩插入至抽屉的父元素上,具体代码: 代码语言:javascript 复制 <el-drawer:append-to-body="true":modal-append-to-body="false"></el-drawer> ...
需求:我需要一个抽屉,没有遮罩,打开抽屉时还能操作界面其它地方。我尝试使用append-to=".content-section"指定它挂载到其父dom上,另外关闭遮罩:modal="false"。这些生效之后,Drawer外层...