image.png

問(wèn)題是：莫名其妙的發(fā)現(xiàn)彈窗一直顯示在遮罩層下面，好啦開(kāi)始搜尋文檔之路~~

結(jié)果發(fā)現(xiàn)：如果 Dialog 的外層布局的 position 值為 fixed, absolute, relative 三者之一時(shí)，就會(huì)出現(xiàn)被蒙板遮住的情況。

因?yàn)槭墙M件嵌套所以不能直接去改position的css會(huì)影響其他頁(yè)面

image.png

 :modal-append-to-body='false'
  // 二者都可以，按照各自需求使用就好啦~~
 :append-to-body='true'

因?yàn)槲业膹棿皢为?dú)加樣式了所以需要彈窗父元素的類名

<!-- 下架彈窗 -->
<div class="deletePopup">
     <el-dialog
          title=""
          :visible.sync="deleteDialogVisible"
          width="40%"
          :before-close="handleClose"
          :modal-append-to-body='false'
        >
          <div class="dialog-body">
              <i class="el-icon-warning"></i>
              <span>確定下架當(dāng)前活動(dòng)嗎?</span>
              <span>下架后用戶則不可見(jiàn)</span>
          </div>
          <span slot="footer">
              <el-button type="danger" @click="confirmDelete">下 架</el-button>
              <el-button @click="deleteDialogVisible = false">取 消</el-button>
          </span>
     </el-dialog>
</div>