vue 实现多个 element-ui Dialog且鼠标可以点击底层
·
使用 pointer-events 属性和 z-index 属性解决层级覆盖问题
pointer-events: 指定在什么情况下某个特定的图形元素可以成为鼠标事件的 target. 对于浏览器来说, 只有 auto 和 none 两个值可用, 其它的几个是针对 SVG 的 (本身这个属性就来自于 SVG 技术).
auto: 与 pointer-events 属性未指定时的表现效果相同, 鼠标不会穿透当前层. 对于 SVG 内容, 该值与 visiblePainted 效果相同.
none: 元素永远不会成为鼠标事件的 target. 但是, 当其后代元素的 pointer-events 属性指定其他值时, 鼠标事件可以指向后代元素, 在这种情况下, 鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器.
也就是说, 父元素设置为 none, 子元素设置为 auto, 是可以穿透当前层的. 那就试试, el-dialog__wrapper 设置 pointer-events:none,el-dialog 设置 pointer-events:auto, 果然可以穿透了, 可以获取鼠标事件.
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)