naive-ui 菜单组件 menu 点击事件怎么使用的？

Question

naive-ui 的菜单组件 menu 的地址是：https://www.naiveui.com/zh-CN/os-theme/components/menu
我没找到点击菜单项的事件如何使用。。。原谅我是小白，希望大佬能出个使用案例、

Answer 1

在你的描述中，我所理解到的：

我要绑定单击事件，但是这个菜单是选项式的，只要传递数组就可以了，没有标签！再看看 API，也看到合适的选项，都是显示相关的，就没有事件。

再说解法。该组件是通过 on-update:value 来监听 key 值变化的，在示例的基础上增加一个 onChange()：

注意，该示例是从官网第一个实例改写，并且是 JS，而非 TS。

export default defineComponent({
  setup() {
    return {
      activeKey: ref(null),
      menuOptions,
      onChange(...rest) {
        console.log("rest", rest)
      }
    };
  },
});

<template>
  <n-menu
    v-model:value="activeKey"
    mode="horizontal"
    :options="menuOptions"
    @update:value="onChange"
  />
</template>

点击效果：

之后，就可以根据收到的 key 值，做出对应的操作了。

---

补充，多次点击一个选项：