el-dialog嵌套的影响、原因及解决方法

最新推荐文章于 2024-07-02 13:51:07 发布

Kazi_1024

最新推荐文章于 2024-07-02 13:51:07 发布

阅读量1.4w

点赞数 13

分类专栏： Vue 文章标签： vue elementui

本文链接：https://blog.csdn.net/weixin_42322454/article/details/117418976

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

前言
一、触发场景
二、原因分析
三、解决方法
- 1.官方解法
- 2.同级显示
四、疑惑
- 个人理解
总结

前言

记录使用ElementUi组件库过程，用Dialog嵌套Dialog所踩过的坑

一、触发场景

当使用一个Dialog对话框后，想再弹出一个对话框，并且维持第一个Dialog不隐藏的前提下，就会触发“嵌套的 Dialog”的场景

举个栗子：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
        
        <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
          <el-dialog
            width="30%"
            title="内层 Dialog"
            :visible.sync="innerVisible"
            >
          </el-dialog>
          <div slot="footer" class="dialog-footer">
            <el-button @click="outerVisible = false">取 消</el-button>
            <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
          </div>
        </el-dialog>
      </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
          return {
            outerVisible: false,
            innerVisible: false
          }
      }
    })
  </script>
</html>

运行结果：
在这里插入图片描述
遮罩层级遮住了对话框

二、原因分析

打开控制台，查看两个对话框的位置就可以很清楚发送了什么
在这里插入图片描述
看似内层dialog的层级高于遮罩层，但是由于内层dialog是外层dialog的子标签，而外层dialog的层级低于遮罩层。
看似是内层与遮罩层在比，实则还是外层与遮罩层比（内层出现后，遮罩层层级会+1），所以才会导致此类bug出现（eg：儿子再强也突破不了老爸的封锁…）

三、解决方法

1.官方解法

官方说法如下：
在这里插入图片描述

问题解决了，皆大欢喜（鼓掌）。原因看控制台，内层dialog不再插入到外层dialog中，而且是body上，而内层的层级比遮罩层高，所以不会再被遮挡。

2.同级显示

核心的问题是出在内层被嵌套到外层中，导致内层无法与遮罩层比较。那按照官方的思路，其实可以衍生出另一条解决思路，让两个dialog同级显示也可以达到相同的效果

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>

        <el-dialog title="外层 Dialog" :visible.sync="outerVisible">

            <div slot="footer" class="dialog-footer">
                <el-button @click="outerVisible = false">取 消</el-button>
                <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
            </div>
        </el-dialog>
        <el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible">
            内层dialog
        </el-dialog>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                outerVisible: false,
                innerVisible: false
            }
        }
    })
</script>

</html>

在这里插入图片描述

四、疑惑

官方为什么不把append-to-body 属性默认设为ture？这样不就可以直接解决嵌套问题吗？
在这里插入图片描述

个人理解

因为把el-dialog默认挂载到body上，会导致各类情况发送。

举个栗子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
  </head>
  <style>
    .father .el-dialog__body {
      color: blue !important;
    }
  </style>

  <body>
    <div id="app">
      <div class="father">
        <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button
        >
        <el-dialog title="外层 Dialog" :visible.sync="outerVisible" >
          <el-dialog
            width="30%"
            title="内层 Dialog"
            :visible.sync="innerVisible"
            append-to-body
          >
            <p>测试文字</p>
          </el-dialog>
          <p>测试文字</p>
          <div slot="footer" class="dialog-footer">
            <el-button @click="outerVisible = false">取 消</el-button>
            <el-button type="primary" @click="innerVisible = true"
              >打开内层 Dialog</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: function () {
        return { outerVisible: false, innerVisible: false };
      },
    });
  </script>
</html>