vue3 - 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 值，做出对应的操作了。

---

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