vue+element el-dialog在遮罩层下面

image.png

问题是：莫名其妙的发现弹窗一直显示在遮罩层下面，好啦开始搜寻文档之路~~

结果发现：如果 Dialog 的外层布局的 position 值为 fixed, absolute, relative 三者之一时，就会出现被蒙板遮住的情况。

因为是组件嵌套所以不能直接去改position的css会影响其他页面

image.png

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

因为我的弹窗单独加样式了所以需要弹窗父元素的类名

<!-- 下架弹窗 -->
<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>确定下架当前活动吗?</span>
              <span>下架后用户则不可见</span>
          </div>
          <span slot="footer">
              <el-button type="danger" @click="confirmDelete">下 架</el-button>
              <el-button @click="deleteDialogVisible = false">取 消</el-button>
          </span>
     </el-dialog>
</div>