el-dialog 打开dialog弹框,鼠标点击事件无法执行
背景:
因为业主要求,他们使用奇安信可信浏览器,这个浏览器是谷歌浏览器引擎套了一层盒子
问题描述:
在谷歌、Edge浏览器正常执行,在奇安信可信浏览器就出现了问题。
问题解决思路:
1.浏览器特性,奇安信可信浏览器不支持,考虑是不是浏览器的问题
2.在奇安信可信浏览器调试问题,寻找解决思路。
效果展示:
解决问题之前:
没有打开弹框就是正常的,如下图:
解决问题之后:
打开dialog弹框之后,鼠标对于地图的操作可以执行
解决思路:
dialog弹框可能出现了问题,点击弹框后,弹框下面的所有东西都没法点击操作。可能是弹框遮罩层,弹框的遮罩层的层级太高了哦,盖住下面的了,然后都点不了
核心代码:
<style lang="scss">
//弹框可点击底层页面
.c-dialog {
.el-dialog__header,
.el-dialog__body,
.el-dialog__footer {
pointer-events: auto !important;
}
}
.dialog-modal {
pointer-events: none !important;
}
:has(> .el-overlay-dialog .c-dialog) {
pointer-events: none !important;
}
</style>
pointer-events
属性值和用法
pointer-events属性可以取多种值,但最常用的是auto和none:
auto:元素会正常响应指针事件,这是默认值。
none:元素不会成为指针事件的目标,事件会“穿透”该元素并作用于其下的元素。
在SVG中,pointer-events还可以取其他值,如visiblePainted、visibleFill、visibleStroke等,这些值允许更细粒度的控制,例如只有当鼠标指针位于元素的填充区域或描边区域时,元素才会响应指针事件。
.el-dialog__header,
.el-dialog__body,
.el-dialog__footer {
pointer-events: auto !important;
}
备注:弹框本身是可拖拽的,所以:pointer-events: auto
其它部分,pointer-events: none