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

作者站长头像
站长
· 阅读数 12

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

回复
1个回答
avatar
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>

点击效果:

answer image

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


补充,多次点击一个选项:

answer image

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