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

test
2024-06-29
在你的描述中,我所理解到的:
我要绑定单击事件,但是这个菜单是选项式的,只要传递数组就可以了,没有标签!再看看 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
值,做出对应的操作了。
补充,多次点击一个选项:
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容