el-menu 点击事件

### 使用 `el-menu` 的点击事件

在使用 Element Plus 组件库中的 `el-menu` 时，可以利用其内置的事件来响应用户的交互行为。对于 `el-menu-item` 和 `el-sub-menu` 的点击事件处理有特定的方式。

当同时给 `el-sub-menu` 和它的子项 `el-menu-item` 添加点击事件监听器时，由于 DOM 事件冒泡机制的存在，点击子项触发的事件可能会传播至父级菜单[^1]。为了避免这种情况下的误触，在定义 `el-sub-menu` 的回调函数内可以通过检查 `$event.target` 来区分实际被点击的对象是否为预期的目标元素：

const subMenu_clickEvent = ($event) => {
    let subMenuTitle = document.querySelector('.subMenuTitle');
    if ($event.target !== subMenuTitle) {
        return;
    }
}

为了自定义样式并覆盖默认外观，可通过 CSS 类选择器修改 `.el-menu`, `.el-menu-item` 及其他关联类的选择器属性值。例如移除右边框、调整圆角半径以及更改激活状态的文字颜色等[^2]:

.el-menu{
    border-right: none !important;
    border-radius: 5px !important;
    background-image: linear-gradient(135deg, #EE9AE5 10%, #5961F9 100%) !important;
}

.el-menu-item{
    border-radius: 15px !important;
}

.el-menu-item.is-active {
    font-weight: bold !important;
    font-size: larger !important;
    color: aqua !important;
}

针对刷新页面后保持导航高亮的问题，可以在每次用户选择新的菜单项时将其对应的路由信息存储起来（比如存入 Cookie 或者 localStorage），这样即使页面重新加载也能恢复之前的浏览位置[^3]。