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>
目录
相关文章
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
4326 0
|
JavaScript 数据安全/隐私保护 UED
UniApp 中的路由魔法:玩转页面导航与跳转
UniApp 中的路由魔法:玩转页面导航与跳转
2730 3
vue2项目使用?.语法报错如何解决?(@babel/plugin-proposal-optional-chaining)
vue2项目使用?.语法报错如何解决?(@babel/plugin-proposal-optional-chaining)
1265 0
echarts修改tooltip默认样式(使用formatter函数拼接加工)
echarts修改tooltip默认样式(使用formatter函数拼接加工)
1428 0
|
容器
UniApp scroll-view 事件不生效(@scroll、@scrolltolower、@scrolltoupper ...)
UniApp scroll-view 事件不生效(@scroll、@scrolltolower、@scrolltoupper ...)
3329 0
|
JSON JavaScript 定位技术
Echarts 绘制地图(中国、省市、区县),保姆级教程!
Echarts 绘制地图(中国、省市、区县),保姆级教程!
28525 154
|
JavaScript
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
1338 49
ElementPlus 之 el-select 多选实现全选功能
本文介绍了在ElementPlus框架中,如何通过自定义事件处理和条件判断实现`el-select`多选控件的全选功能。
2906 1
ElementPlus 之 el-select 多选实现全选功能