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

想要点击首先需要给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也可以实现,希望能有所帮助

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐