modal-class遮罩层的自定义类名string— z-index设置 z-indexnumber— header-aria-levela11yheader 的aria-level属性string2 WARNING custom-class已被弃用,将会于2.3.0移除, 请使用class。 事件# 插槽名说明类型 openDrawer 打开的回调Function openedDrawer 打开动画结束时的回调Function ...
设置position为绝对定位,但是会出现一个问题:v-modal遮罩层是满屏显示的 因此最终解决方案为: 先在抽屉组件外套一层div标签,再修改内部样式 1 2 3 4 5 6 7 8 9 <el-drawer :visible.sync="isShow"direction="rtl"ref="drawerExam"@open="openDrawer()"></el-drawer> ... .drawerExam-container { ...
🎉 A Vue.js 3 UI Library made by Element team. Contribute to element-plus/element-plus development by creating an account on GitHub.
":before-close="handleClose"v-model="dialog"direction="ltr"custom-class="demo-drawer"ref="drawer"><el-form:model="form"><el-form-itemlabel="活动名称":label-width="formLabelWidth"><el-inputv-model="form.name"autocomplete="off"></el-input></el-form-item><el-form-itemlabel="活动区域"...
Bug Type: Component Environment Vue Version: 3.3.4 Element Plus Version: 2.3.14 Browser / OS: Chrome 已是最新版本 版本 117.0.5938.150 Build Tool: Vite Reproduction Related Component el-drawer Reproduction Link Element Plus Playground Steps to re...
wrapperClosable="false"@close="onClose"v-if="isShowDraw":visible.sync="isShowDraw":direction="direction":size="sizePercentLabel"><templateslot="title"><slotname="title"></slot></template><slot></slot></el-drawer></template>exportdefault{ name:'Drawer', data() {return{ isShowDraw:this...
wrapperClosable="false"@close="onClose"v-if="isShowDraw":visible.sync="isShowDraw":direction="direction":size="sizePercentLabel"><templateslot="title"><slotname="title"></slot></template><slot></slot></el-drawer></template>exportdefault{ name:'Drawer', data() {return{ isShowDraw:this...
target.classList.contains("el-dialog__wrapper"); }; }, methods: { handleWrapperClick() { if (!this.closeOnClickModal || !this.wrapperMouseDowned) return; this.handleClose(); }, }, }; const DrawerPatched = { extends: Drawer, data() { return { wrapperMouseDowned: false, }; }, ...
4 name="el-drawer-fade" 5 @after-enter="afterEnter" 6 @after-leave="afterLeave" 7 @before-leave="beforeLeave" 8 > 9 <el-overlay 10 v-show="visible" 11 :mask="modal" 12 :overlay-class="modalClass" 13 :z-index="zIndex" ...
遮罩和下层的内容覆盖在了抽屉之上. 解决办法是修改append-to-body和modal-append-to-body属性,把抽屉插入至 body 元素上,把遮罩插入至抽屉的父元素上,具体代码: 代码语言:javascript 复制 <el-drawer:append-to-body="true":modal-append-to-body="false"></el-drawer> ...