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, 果然可以穿透了, 可以获取鼠标事件.