el-dialog嵌套问题,第二个弹窗会被遮住的解决办法

简介: el-dialog嵌套问题,第二个弹窗会被遮住的解决办法

背景

el-dialog中再嵌套一个el-dialog,第二个弹窗会被遮住。这是因为第二个弹窗没有给定append-to-body属性造成的


正常情况下,我们不建议使用嵌套的 Dialog,如果需要在页面上同时显示多个 Dialog,可以将它们平级放置。对于确实需要嵌套 Dialog 的场景,我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true,它就会插入至 body 元素上,从而保证内外层 Dialog 和遮罩层级关系的正确。

我们更推荐el-dialog+ElMessageBox的形式,这样就不会造成弹窗被遮住的问题了


如果需要在一个 Dialog 内部嵌套另一个 Dialog,需要使用 append-to-body 属性。

<template><el-dialogwidth="200px"top="50px" :close-on-click-modal="false" :title="$t('selectToExport')"custom-class="dialog" :before-close="handleClose"><divstyle="padding: 20px 20px 20px 11px"><divclass="template-select"><el-selectv-model="templateId"  :placeholder="$t('pleaseChooseTemplate')"size="mini"class="template-select-real"filterableclearablev-if="showTemplate"@change="changeTemplateSelect"><el-optionv-for="(item) in templateOptions"            :key="item.id"            :label="item.templateName"            :value="item.id"><divclass="template-select-real-item"><span>{{ item.templateName }}</span><iclass="iconfont icon-shanchu del-icon"@click.stop="showDelTemplatePopup(item.id)"></i></div></el-option></el-select></div><!--新增模板弹窗--><template><el-dialogv-model="isShowAddTemplatePopup"width="20%"top="251px" :close-on-click-modal="false" :before-close="closeAddTemplatePopup"append-to-body :title="$t('addTemplate')"><divclass="template-popup"><!--<divclass="template-popup-title">{{$t("addTemplate")}}</div> --><divclass="template-popup-content"><el-inputv-model="templateName" :placeholder="$t('templateName')"maxlength="30"/></div><divclass="template-popup-btn"><el-buttonsize="mini"@click="closeAddTemplatePopup">{{ $t("cancel") }}</el-button><el-buttonsize="mini"type="primary"@click="handleAddTemplatePopup" :loading="addTemplateLoading">{{ $t("ensure") }}</el-button></div></div></el-dialog></template></el-dialog></template>
目录
相关文章
|
7月前
|
前端开发
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
|
JavaScript
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
2813 0
VUE element-ui之el-popover弹出框在局部全屏下不显示问题及弹框、小箭头背景修改
|
Web App开发 JavaScript 程序员
如何去掉或者修改网页中的遮罩层,DIV等元素?
起因: 前几天女友在查资料写文章,打开一个网页,发现网页的被一个半透明的遮罩层给覆盖了(一个已经过期的组织活动 的网页,H5就将它遮盖了),就来问我怎么弄。
1722 0
|
3月前
|
JavaScript
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
该方案通过自定义Vue指令实现ElementUI的`el-dialog`弹窗的拖拽和最大化功能。只需在`main.js`中引入并注册指令,然后在Vue组件中绑定指令即可。支持自定义参数控制是否允许最大化和拖拽,并提供最大化后的回调函数。具体使用方法详见示例代码。
454 0
ElementUI的el-dialog弹窗修改设置可拖拽可最大化
|
5月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
736 3
|
5月前
【el-cascader-plus亲测有限】el-cascader级联选择器懒加载+多选功能回显失败解决方案
【el-cascader-plus亲测有限】el-cascader级联选择器懒加载+多选功能回显失败解决方案
252 0
|
7月前
element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
element-plus:el-Dialog对话框组件垂直居中、禁止屏幕滚动、使用内滚动
|
7月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
57 0
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
element-ui框架的el-dialog弹出框被遮罩层挡住了/el-drawer....会生成v-model元素的组件被遮罩层挡住
444 1
|
小程序
小程序:picker-view选择器快速滚动,确认时,”值显示错误“
小程序:picker-view选择器快速滚动,确认时,”值显示错误“
347 0