版权声明:如果对您有所帮助,那就随手分享帮助更多人吧! https://blog.csdn.net/weixin_43970743/article/details/88971981
今日在做项目的时候,遇到一个小问题,在同一页面,使用Element的弹框组件,却发现第二次弹框得鼠标点击之后才会显示变亮,似乎被遮住了!(如图效果);
才发现,element 的dialog嵌套问题,之所以第二次弹出的会被遮住,是因为没有给定 append-to-body
正常情况下,我们不建议使用嵌套的 Dialog,如果需要在页面上同时显示多个 Dialog,可以将它们平级放置。对于确实需要嵌套 Dialog 的场景,我们提供了
append-to-body
属性。将内层 Dialog 的该属性设置为 true,它就会插入至 body 元素上,从而保证内外层 Dialog 和遮罩层级关系的正确。
如果需要在一个 Dialog 内部嵌套另一个 Dialog,需要使用 append-to-body
属性。
<template>
<div id="datagovernIssu">
<div id="catalogTotalChart" style="height: 500px;width: 100%;"></div>
<el-dialog
:title="'数据治理总览-已发布服务-市交通委'+ govName"
:visible.sync="innerVisible"
width="1100px" append-to-body> //第二次弹框!
<template>
<div style="margin-left: 450px" >
<span style="align-content: center;">上海市交通委已发布服务详情</span></div>
<el-table
:data="tableData"
style="width: 100%">
</template>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'datagovernIssu',
data() {
}
}
},
methods: {
clickHandle() {
this.catalogTotalChart.on('click','series.bar', (params) => {
this.innerVisible = true;//将内层 Dialog 的该属性设置为 true,它就会插入至 body 元素上,从而保证内外层 Dialog 和遮罩层级关系的正确。
});
}
}
在第二次弹框加一个append-to-body就好了!(如图演示)
--------------------------------拓展--------------------------------
Element组件之【Dialog 对话框】
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
visible | 是否显示 Dialog,支持 .sync 修饰符 | boolean | — | false |
title | Dialog 的标题,也可通过具名 slot (见下表)传入 | string | — | — |
width | Dialog 的宽度 | string | — | 50% |
fullscreen | 是否为全屏 Dialog | boolean | — | false |
top | Dialog CSS 中的 margin-top 值 | string | — | 15vh |
modal | 是否需要遮罩层 | boolean | — | true |
modal-append-to-body | 遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上 | boolean | — | true |
append-to-body | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true | boolean | — | false |
lock-scroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true |
custom-class | Dialog 的自定义类名 | string | — | — |
close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean | — | true |
close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean | — | true |
show-close | 是否显示关闭按钮 | boolean | — | true |
before-close | 关闭前的回调,会暂停 Dialog 的关闭 | function(done),done 用于关闭 Dialog | — | — |
center | 是否对头部和底部采用居中布局 | boolean | — | false |