el-drawer判断是不是点击在空白区域
时间: 2023-12-06 11:05:16 浏览: 49
在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的内容区域,可以关闭抽屉。
相关问题
判断是不是点击el-drawer的遮罩层
在el-drawer组件中,遮罩层是一个用于阻止用户直接与页面交互的,点击遮罩层应该不会关闭抽屉。要判断是否点击了el-drawer的遮罩层,可以使用以下代码:
```javascript
const drawerContainer = document.querySelector('.el-drawer__container'); // 获取el-drawer容器元素
drawerContainer.addEventListener('click', (event) => {
// 判断是否点击了遮罩层
if (event.target.classList.contains('el-drawer__mask')) {
// 点击了遮罩层,不做处理
return;
}
// 处理其他情况,如点击了抽屉内容区域
});
```
在上述代码中,`event.target`表示点击的目标元素,`classList.contains('el-drawer__mask')`用于判断目标元素是否包含`el-drawer__mask`类名,如果包含,说明点击了遮罩层,返回即可。如果不包含,则说明点击了抽屉内容区域或其他区域,可以在这里处理相应的操作。
用el-tree控制多个el-drawer的显示并且点击新的el-tree隐藏上一个el-drawer并显示新的
你可以使用以下代码实现:
```
<template>
<div>
<el-tree :data="treeData" @node-click="handleNodeClick"></el-tree>
<el-drawer v-model="drawerVisible" :before-close="beforeDrawerClose">
<!--drawer内容-->
</el-drawer>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
label: '节点1',
children: [
{ label: '子节点1' },
{ label: '子节点2' }
]
},
{
label: '节点2',
children: [
{ label: '子节点3' },
{ label: '子节点4' }
]
}
],
drawerVisible: false,
currentDrawerKey: ''
};
},
methods: {
handleNodeClick(data, node) {
const key = node.key;
if (key === this.currentDrawerKey) {
// 点击同一个节点,直接返回
return;
}
// 隐藏上一个drawer
this.drawerVisible = false;
this.currentDrawerKey = key;
// 显示新的drawer
this.$nextTick(() => {
this.drawerVisible = true;
});
},
beforeDrawerClose(done) {
this.drawerVisible = false;
this.currentDrawerKey = '';
done();
}
}
};
</script>
```
在这个例子中,我们先在页面上渲染一个 `el-tree` 组件和一个 `el-drawer` 组件。当点击树节点时,我们先隐藏上一个 `el-drawer`,然后显示新的 `el-drawer`,实现了控制多个 `el-drawer` 显示的功能。我们还需要记录当前显示的 `el-drawer` 对应的节点 `key`,这样可以在点击同一个节点时避免重复操作。同时,我们也需要在 `el-drawer` 关闭前清除记录的 `currentDrawerKey`,避免出现逻辑错误。