NaiveUI中menu组件的展开事件、父级点击事件

最新推荐文章于 2024-05-10 13:22:17 发布
最新推荐文章于 2024-05-10 13:22:17 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 随手记录 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HuafuCsdn/article/details/127308350
版权

问题描述：在使用menu组件,想监听每个节点的点击事件，官方文档只提供了2个事件

        1. @update:value 此事件只对叶子节点的点击生效

        2.@update:expandedKeys 此事件对展开节点时触发且只返回keys数组

问题需求：点击节点触发事件，并得到点击节点的渲染对象数据

问题解决：使用 render-label 函数手动渲染节点，并在渲染函数中注册点击事件

 

桃花糖水深千尺
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
尤大都推荐的组件库是如何开发出来的？
m0_61544080的博客
10-21 392
> 注意：为了让篇幅尽可能简洁一丢丢，在有些地方贴源码时，我尽可能贴最能反映要讲解内容的源码，其他重复性的代码就略去了，所以如果你自己尝试去阅读源码时，可能会发现和文章里的代码有出入。文章跑通 Naive UI 所用到的源码仓库为：[https://github.com/pftom/naive-app](https://github.com/pftom/naive-app "https://github.com/pftom/naive-app") # 简洁的抽象 前端开发者现在几乎已经离不开 UI
NaiveUI安装及使用
成长的点滴
02-02 1127
在全局或需要使用message的地方使用 ，然后使用 useMessage方法获取对应api，如。则在env.d.ts 或 vire-env.d.ts，添加声明即可。1、安装UI组件库 naive-ui。3、在main.ts中导入可全局使用。6、使用消息提示message。4、具体页面直接通过标签使用。// App.vue中用。然后在具体子页面使用。
naive UI 折叠面板设置折叠面板的可点击区域
lsjweiyi的博客
06-05 1629
我在使用naive UI 的折叠面板时，他有个特点，就是无论点击header的哪个位置，都会展开/折叠面板。且组件没有提供api设置可点击区域这个特点会带来一个问题，比如如下场景：由于我在header上设置的内容比较复杂，有按钮，导致这么一个问题，我点击自己的按钮，也会展开或折叠面板，那么就没办法友好的使用我自己的按钮了。 所以，我希望，只有点击左边的箭头图标时，才会展开或折叠面板。利用naive提供的受控模式，即点击面板的header之后，是否展开由我决定，而不是组件自己决定。通过自定义那个箭头图标，并且
Naive UI table整行点击事件
最新发布
Rong1125的博客
05-10 250
【代码】Naive UI table整行点击事件。
NODE-WEBKIT教程(6)NATIVE UI API 之MENU(菜单)
weixin_33772645的博客
04-16 103
node-webkit教程(6)Native UI API 之Menu(菜单) 文/玄魂 目录 node-webkit教程(6)Native UI API 之Menu(菜单)1 前言... 2 6.1  Menu 概述... 3 6.2  menu api6 6.2.1  new Menu([option])6 6.2.2  Menu.items. 6 6...
【Naive UI中给表格的表头添加点击事件】
chenchendiandian的博客
06-08 1143
Naive UI中给表格的表头添加点击事件。
Element NavMenu 导航菜单动态遍历与点击回调事件
qq_38101240的博客
12-16 6749
<template> <div> <el-menu default-active="2" class="el-menu-vertical-demo" > <template v-for="(item, index) in menuList"> <el-submenu v-if="item.child&&item.child.length>0" :key="ite
使用NativeMenu显示快捷菜单
noahgenius 战斗的事业
11-13 274
AIR可以使用mx.control.Menu或者flash.display.NativeMenu作为右键弹出的快捷菜单，前者是Flex样式的而后者是系统样式的，两者用法差不多。我这里用NativeMenu来做个例子。与ContextMenu不同，它们都是用Stage X和Y来定位并显示的，他们自身都有一个类似“show”的方法，来看看这个例子： private var _qMenu:Nati...
naiveui 的n-menu使用字体icon解决方案
xuelang532777032的博客
06-13 1309
先看效果好，来直接说操作方法。
Naive ui：菜单 Menu批量处理图标替换自定义图片
lq099526的专栏
09-30 2587
项目中使用的是自定义的图标，把需要使用的图标保存到本地，使用。2、新建一个js文件，把需要用到的图标引入到项目文件中。2、菜单组件中引入js文件，渲染图标。n-menu自带的图标使用。图标库，使用方法参考官网和。批量处理菜单图标渲染。1、新建一个菜单组件。
Vue+Naive UI实现树形控件点击按钮全部展开或收起功能
L770515的博客
02-22 841
在项目中我们会用到一些树形控件进行数据操作等一系列使用逻辑。那么如果第一级树形数据多的话我们默认展开需要滚动，如果默认不展开想要查看子集又需要挨个点击。那么我们可以根据组件API的默认展开项来添加按钮进行这个处理。首先定义一个默认展开的变量，然后在树形控件中定义好。然后给按钮定义个方法操作默认展开项。这样简单的一个小功能就做好啦。
ElementUi分页器 @update:value的用法
qq_46370075的博客
05-31 1040
vue @update:value
从零开始学习Vue3和Naive UI打造一个待办事项应用。
J_Sky：编程爱好者,又菜又爱玩.
02-19 1670
这个简单的待办事项的小项目功能很简答，事项了代办事项的添加、删除、完成、分类显示代办事项中的已完成和未完成事项，额外添加了主题的切换。这个待办事项的小项目还是有很多功能可以添加的，比如编辑项目内容，按照一定的属性排列项目等。能够搭建此项目并编写出项目的代码，我觉得可以算是入门了Vue3了。
naive UI tree组件实现增删改功能
leekuikui的博客
08-23 4246
naive UI的tree组件提供了节点内容渲染函数，节点后缀渲染函数，增删改的功能可以结合节点内容渲染函数和节点后缀渲染函数来实现。
vue3使用render函数渲染标签或组件
qq_38711726的博客
07-26 2106
使用naiveUI的组件的下拉中需要动态渲染自定义的样式，所以要使用到:render-label属性。好啦 祝大家什么bug都能解决~可修改为：（返回一个函数）
naive-ui h()渲染组件个人示例
xuelang532777032的博客
06-20 1597
陆续更新，卡到我就更新！你要是卡到，去公众号=》私信，或留言，博主看到了，来更新本博文，因为csdn没有经常在线。目前 NPopselect、NButton、NPopconfirm正文。
vue3 update:modelValue使用
热门推荐
淡淡的芦苇的博客
11-22 4万+
v-model中update:modelValue v-model的主要原因是由于value和input事件可能另有它用， 那么我们可不可以直接使用另外的属性和方法，而不需要去通过model进行定义。 vue3中就实现了这个功能，v-model绑定的不再是value，而是modelValue，接收的方法也不再是input，而是update:modelValue 写法： <ChildComponent v-model:title="title" /> //或者 <ChildCompone
vue的组件传值
Tsailing666的博客
11-01 73
vue的组件传值
如何对menu设置点击事件
10-17
要对menu设置点击事件，需要使用setOnMenuItemClickListener()方法。具体实现代码如下： ``` menu.setOnMenuItemClickListener(new OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem item) { switch (item.getItemId()) { case R.id.menu_item1: // 点击了菜单项1的操作 return true; case R.id.menu_item2: // 点击了菜单项2的操作 return true; default: return false; } } }); ``` 其中，menu是指你要设置点击事件的菜单，OnMenuItemClickListener是一个接口，需要实现它的onMenuItemClick()方法，该方法会在菜单项被点击时被调用。在onMenuItemClick()方法中，可以根据菜单项的id来判断用户点击了哪个菜单项，并执行相应的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值