element+vue2项目el-dialog弹窗显示的同时操作页面其他内容

项目中遇到一个需求就是在弹窗显示的同时，可以操作页面内的其他元素，比如点击其他元素，显示其他弹窗

想要点击首先需要给el-dialog的遮罩层去掉，并且点击遮罩层不让弹窗消失

 <el-dialog
    v-dialogDrag
  :visible.sync="dialogVisible"
  :modal="false"
  width="30%"
  :close-on-click-modal="false"
>

</el-dialog>
//:model="false"   不显示遮罩层
//:close-on-click-modal="false"   点击弹窗以外区域弹窗不消失

在弹窗出现的时候不能点击其他区域，是因为弹窗外面包裹了一层z-index数值比较大的div盒子，

将该div的z-index层级数值改的小一点就可以了

::v-deep .el-dialog_wrapper {

z-index:1 !important
}

更新：

 

项目之中遇到一个新的问题，项目需求是需要el-dialog自由拖动并且可以同时操作其他dom，自由拖动成功之后发现无法对页面其他区域dom进行操作（dialog和页面不在一个vue文件内）靠设置z-index 并无法解决，

.el-dialog__wrapper {
  pointer-events: none;//dialog外包裹的盒子区域设置鼠标不再操作当前层
  /deep/ .el-dialog {
    pointer-events: auto;//dialog真正区域设置鼠标操作当前层
  }
}

使用此方法之后发现，可以不使用z-index也可以实现，希望能有所帮助