Element的Dialog元件，嵌套的 Dialog的append-to-body屬性，差點把我氣死 （append-to-body屬性，導緻内層彈框樣式設定不上）

一、問題描述

append-to-body

屬性，導緻内層彈框樣式設定不上

二、解決辦法，

自然是 去除

append-to-body

屬性,内層彈框樣式設定上了，且正常顯示

三、彈框嵌套示例

要點：

• 去掉

  append-to-body

  屬性，内層彈框和外層彈框寫在同級，隻需把内層的那部分代碼寫在外層彈框的下面就行了，不用嵌套寫。相當于兩個dialog并列，後顯示的寫在最後就行了
• 不是真正的嵌套的寫法，隻是看起來實作了想要彈出效果

Test.vue

<template>
  <div class="test">
    <el-button type="danger" style="margin:50px;" @click="showOuterPopup"
      >打開外層彈框</el-button
    >
    <el-dialog
      class="comn_dialog"
      title="外層彈框"
      :visible.sync="outerVisible"
      width="40%"
    >
      <p style="color:red;">我是外層彈框</p>
      <el-button @click="showInnerPopup">點選顯示内層彈框</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="outerVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      class="comn_dialog"
      title="内層彈框"
      :visible.sync="innerVisible"
      width="20%"
    >
      <span style="color:green;">我是内層彈框</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      outerVisible: false, // 外層彈框是否顯示
      innerVisible: false // 内層彈框是否顯示
    };
  },
  methods: {
    showOuterPopup() {
      this.outerVisible = true; // 顯示外層彈框
    },
    showInnerPopup() {
      this.innerVisible = true; //顯示内層彈框
    }
  }
};
</script>
           

效果如圖：

Tips: 彈框的樣式已被重寫，詳情可參考 el-dialog的二次封裝,裡面的

comn_dialog

樣式即為彈框的樣式，可根據自己的情況進行更改