element-ui drawer 点击遮罩层触发遮罩层下面元素的事件
时间: 2023-07-12 16:25:36 浏览: 175
如果你想要在 Element UI 的 Drawer 组件的遮罩层上点击时触发遮罩层下面元素的事件,可以使用 `@mousedown` 事件和 `append-to-body` 属性。
具体来说,你需要给 Drawer 组件添加 `@mousedown.native` 事件,并在事件处理函数中判断点击的元素是否是遮罩层,如果是,则阻止事件的默认行为,从而不会将点击事件传递给 Drawer 组件。然后,你需要将 Drawer 组件的 `append-to-body` 属性设置为 `true`,这样 Drawer 组件才能被添加到 body 元素下,从而穿过遮罩层。
下面是一个示例代码:
```html
<el-drawer title="Drawer" :visible="visible" :modal="true" :append-to-body="true" @mousedown.native="handleClick">
<!-- Drawer 内容 -->
</el-drawer>
```
```js
methods: {
handleClick(event) {
if (event.target.classList.contains('el-drawer__wrapper')) {
event.preventDefault();
}
}
}
```
在 `handleClick` 方法中,我们判断点击的元素是否具有 `el-drawer__wrapper` 类名,如果是,则说明点击的是遮罩层,此时可以阻止事件的默认行为,从而不会将点击事件传递给 Drawer 组件,从而可以触发遮罩层下面元素的事件。