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

element 的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-dialog width="200px" top="50px" :close-on-click-modal="false" :title="$t('selectToExport')" custom-class="dialog" :before-close="handleClose"><div style="padding: 20px 20px 20px 11px"><div class="template-select"><el-select v-model="templateId"  :placeholder="$t('pleaseChooseTemplate')" size="mini" class="template-select-real" filterable clearable v-if="showTemplate" @change="changeTemplateSelect"><el-optionv-for="(item) in templateOptions":key="item.id":label="item.templateName":value="item.id"> <div class="template-select-real-item"><span>{{ item.templateName }}</span><i class="iconfont icon-shanchu del-icon" @click.stop="showDelTemplatePopup(item.id)"></i></div></el-option></el-select></div><!-- 新增模板弹窗 --><template><el-dialog v-model="isShowAddTemplatePopup" width="20%" top="251px" :close-on-click-modal="false" :before-close="closeAddTemplatePopup" append-to-body :title="$t('addTemplate')"><div class="template-popup"><!-- <div class="template-popup-title">{{$t("addTemplate")}}</div> --><div class="template-popup-content"><el-input v-model="templateName" :placeholder="$t('templateName')" maxlength="30" /></div><div class="template-popup-btn"><el-button size="mini" @click="closeAddTemplatePopup">{{ $t("cancel") }}</el-button><el-button size="mini" type="primary" @click="handleAddTemplatePopup" :loading="addTemplateLoading">{{ $t("ensure") }}</el-button></div></div></el-dialog></template></el-dialog>
</template>

el-dialog嵌套问题，第二个弹窗会被遮住的解决办法相关推荐

bootstrap 模态窗口第二次无法加载js 的解决办法
背景在使用模态窗口的时打开第一次是没有问题的 ,一切正常,在打开第二次的时候,没法加载相应的js 原因 bootstrap 使用模态窗口时候使用 $("#McustomerAdd" ...
html输入法弹出页面不移动,html5 iphone input 输入法弹窗将页面顶起解决办法
Ubuntu安装c++编译器打开终端输入sudo apt-get install build-essential 安装gcc和一些库函数.提供C/C++的编译环境注意编译c++程序要用g++ 设计 ...
《视觉SLAM十四讲》高翔第二版实践出现的问题及解决办法笔记
#前言:这是我在看这本书遇到的问题和解决方法的笔记,希望可以在你学习的过程中给你一点帮助.使用下文的方法在我的虚拟机中可以解决,但不确保在你那边可以解决,因此仅作参考.写得有点乱,按照出现的问题参照一 ...
关于AutoCAD反复弹窗Nonvalid Software Detected的解决办法
在文件资源管理器中搜索路径 C:\Program Files\Autodesk\AutoCAD 2020\Support\NewTabPage\config\ACAD\zh-CN (注意自己安装的版本 ...
ElementUI dialog嵌套蒙层遮挡问题
dialog嵌套会有蒙层遮挡问题,我们加两个属性解决他 <el-dialog :close-on-click-modal="false" title="选择图片&q ...
Word 域嵌套太深弹窗，更新域卡顿，解决办法
1.问题描述用Word编辑几百页或者上千页的文档时,因为资料来源和拷贝的关系,总会遇到各种有问题的文档块,一般更新目录页码或者题注序号时,最快的操作就是CTRL+A,然后F9,但是偶尔会遇到这样的文 ...
安卓Dialog对话框多次显示而闪退的解决办法
事情是这样子的,我在一个活动中自定义了一个AlertDialog,通过一个按钮点击即可弹出,而后来出现的情况是,第一次点击就没问题, 正常跳出,而第二次就直接程序闪退,然后报The specified ...
微信小程序弹窗滚动导致页面穿透问题的解决办法
最近在做小程序,由于小程序提供的弹窗样式有限,我们通常会自定义弹窗组件(我都是在弹窗蒙层上加了catchtouchmove="true",保证最基本的穿透问题但是解决不了弹窗内容区 ...
BDC 弹窗录屏解决办法（ABUMN）
导语:最近在做一个资产价值转移的程序,没有找到合适的函数,就用了BDC,但是有个问题是,ABUMN这个事务码,第一次进入会弹窗让输入公司代码,第二次就不会了,会有参数ID的默认,这样没办法控制. 解决 ...

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

element 的dialog嵌套问题，第二个弹窗会被遮住的解决办法

背景

el-dialog嵌套问题，第二个弹窗会被遮住的解决办法相关推荐

最新文章

热门文章