element-ui 组件库 Dialog 对话框 遮罩层阴影 遮挡 页面内容

在用Dialog 对话框的时候 遇到了 阴影遮罩层高于 弹窗显示的问题  如下图

我们想要的效果是 如下图：

解决办法如下：

在el-dialog加上 :append-to-body="true"

代码示例

 <el-dialog :visible.sync="dialogVisible" :append-to-body="true">

         <img width="100%" :src="detilData.item_image" alt="">

  </el-dialog>