触发el-menu-item事件获取的event对象

触发`el-menu-item`事件时，会自动传入一个`event`对象作为参数，你可以通过该对象获取触发事件的具体信息，例如触发的元素、鼠标位置、键盘按键等。具体可以通过以下方式获取该对象的属性：

1. `event.target`：获取触发事件的目标元素，即`el-menu-item`元素本身。
2. `event.currentTarget`：获取绑定事件的元素，即包含`el-menu-item`元素的`el-menu`组件。
3. `event.key`：获取触发事件时按下的键盘按键。
4. `event.clientX`和`event.clientY`：获取触发事件时鼠标的横纵坐标。
5. `event.pageX`和`event.pageY`：获取触发事件时鼠标相对于页面左上角的横纵坐标。
6. `event.preventDefault()`：阻止默认行为。

相关问题

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]。

el-menu中的@select

在Ant Design Vue（简称`ant-design-vue`）的组件库中，`<el-menu>`是一个用于创建导航菜单的组件，它通常与Vue的数据绑定和事件系统配合使用。`@select`这个指令是自定义事件，当用户通过鼠标点击或键盘操作选择菜单项时触发。`@select`后面跟着一个回调函数，这个函数接收两个参数：

1. `index`：被选中的菜单项的索引，如果使用的是`command`模式，还会包含命令对象；
2. `event`：原生的DOM事件对象。

使用示例：

<template>
  <el-menu
    default-active="0"
    @select="handleMenuSelect"
  >
    <el-menu-item index="0">菜单1</el-menu-item>
    <el-menu-item index="1" command="cmd1">菜单2</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  methods: {
    handleMenuSelect(index, event) {
      console.log('当前选中的菜单项:', index);
      // 如果是command模式，可以根据event获取命令对象
      if (event.command) {
        console.log('命令对象:', event.command);
      }
    },
  },
};
</script>