vue3 el-sub-menu 和el-menu-item 都有点击事件
时间: 2025-01-01 07:27:32 浏览: 96
### 实现 Vue3 中 `el-sub-menu` 和 `el-menu-item` 的点击事件
在 Vue3 使用 Element Plus 库时,可以分别为 `el-sub-menu` 和 `el-menu-item` 添加点击事件。由于事件冒泡机制的存在,在点击子菜单项 (`el-menu-item`) 时,事件会传播至父级的子菜单 (`el-sub-menu`)。为了防止不必要的行为触发,可以在 `el-sub-menu` 的点击处理器中加入逻辑判断。
对于 `el-menu-item` 而言,其默认 click 事件由组件库内部处理,并不直接传递原生 event 参数[^1]。因此,阻止事件冒泡需采用特定策略:
#### 方法一:通过事件对象区分目标元素
```html
<template>
<el-menu :default-active="activeIndex">
<el-sub-menu index="1" @click="handleSubMenuClick($event)">
<span slot="title">导航一</span>
<el-menu-item index="1-1" @click="handleMenuItemClick('Item 1')">选项1</el-menu-item>
<el-menu-item index="1-2" @click="handleMenuItemClick('Item 2')">选项2</el-menu-item>
</el-sub-menu>
</el-menu>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const activeIndex = ref<string>('');
function handleSubMenuClick(event: MouseEvent): void {
const targetElement = event.target as HTMLElement;
const subMenuTitle = document.querySelector('.subMenuTitle');
if (targetElement !== subMenuTitle && !targetElement.closest('.el-menu-item')) {
console.log('Sub Menu Clicked');
}
}
function handleMenuItemClick(itemName: string): void {
console.log(`${itemName} clicked`);
}
</script>
```
此代码片段展示了如何利用 `$event` 来访问原始鼠标事件并检查实际被点击的是哪个部分。如果点击发生在 `.el-menu-item` 上,则仅调用对应的 item 处理函数;而当点击发生于其他区域(即真正的子菜单标题),则执行预期的子菜单动作。
#### 方法二:CSS 属性调整布局方式
除了 JavaScript 控制外,还可以考虑改变样式来影响交互体验。比如设置 `el-sub-menu` 的显示模式为网格布局(grid),这可能有助于改善视觉效果或响应特性[^2]。
```css
.el-sub-menu {
display: grid;
}
```
这种方法主要作用在于美化界面而非解决功能上的冲突问题。不过有时候合理的 CSS 设置也能间接帮助优化用户体验。
阅读全文
相关推荐


















