el-drawer判断是不是点击在空白区域
时间: 2023-12-06 18:05:16 浏览: 387
在el-drawer组件中,可以通过点击空白区域来关闭抽屉。判断点击是否在空白区域的方法如下:
1. 给el-drawer的容器元素绑定一个click事件监听器,当点击容器元素时触发。
2. 在事件监听器中,判断点击的目标元素是否是el-drawer的内容区域,如果是,则不关闭抽屉;如果不是,则关闭抽屉。
代码示例:
```javascript
// 获取el-drawer容器元素
const drawerContainer = document.querySelector('.el-drawer__container');
// 给容器元素绑定click事件监听器
drawerContainer.addEventListener('click', (event) => {
// 判断点击的目标元素是否是el-drawer的内容区域
if (!event.target.closest('.el-drawer__wrapper')) {
// 如果不是,则关闭抽屉
this.closeDrawer();
}
});
```
在上述代码中,`event.target`表示点击的目标元素,`event.target.closest('.el-drawer__wrapper')`表示在点击的目标元素及其父元素中查找最近的`.el-drawer__wrapper`元素,如果找到则返回该元素,否则返回null。如果返回的结果是null,则说明点击的目标元素不是el-drawer的内容区域,可以关闭抽屉。
阅读全文