element+vue2项目el-dialog弹窗显示的同时操作页面其他内容
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
项目中遇到一个需求就是在弹窗显示的同时,可以操作页面内的其他元素,比如点击其他元素,显示其他弹窗
想要点击首先需要给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 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)