element 的dialog嵌套问题，第二次弹出的会被遮住，怎么解决？

bug菌
3,682 阅读3分钟

今日在做项目的时候，遇到一个小问题，在同一页面，使用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
titleDialog 的标题，也可通过具名 slot （见下表）传入string——
widthDialog 的宽度string—50%
fullscreen是否为全屏 Dialogboolean—false
topDialog CSS 中的 margin-top 值string—15vh
modal是否需要遮罩层boolean—true
modal-append-to-body遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上boolean—true
append-to-bodyDialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 trueboolean—false
lock-scroll是否在 Dialog 出现时将 body 滚动锁定boolean—true
custom-classDialog 的自定义类名string——
close-on-click-modal是否可以通过点击 modal 关闭 Dialogboolean—true
close-on-press-escape是否可以通过按下 ESC 关闭 Dialogboolean—true
show-close是否显示关闭按钮boolean—true
before-close关闭前的回调，会暂停 Dialog 的关闭function(done)，done 用于关闭 Dialog——
center是否对头部和底部采用居中布局boolean—false

 OK，今天的文章先写到这。如果问题的小伙伴欢迎下发留言。

❤如果文章对您有所帮助，就请在文章末尾的左下角把大拇指点亮吧！(#^.^#)；

❤如果喜欢bug菌分享的文章，就请给bug菌点个关注吧！(๑′ᴗ‵๑)づ╭❤～；

❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】；

❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复参与讨论(请勿发表攻击言论，谢谢）；

❤版权声明：本文为博主原创文章，转载请附上原文出处链接和本文声明，版权所有，盗版必究！(*^▽^*).

avatar
文章
阅读
粉丝