arco-design-vue的tree组件实现右击事件

arco-design-vue的tree组件实现右击事件

业务中需要使用到tree组件,并且还要对tree实现自定义鼠标右击事件。在arco-design-vue的文档中,可以明确的看到,tree组件并没有右击事件的相关回调,那要如何实现呢???
这里提供两种思路:
1、使用插槽,在插槽中对DOM实现contextmenu事件(会有问题,下面会说)
2、使用事件冒泡机制,对tree实现contextmenu事件

思路一:使用插槽对自定义实现contextmenu事件

image.png

本以为这样就万事大吉了,万万没想到测试给我提了一个bug。这个右击事件,“顾尾不顾头”,即在节点前面的空白地方右击无效。

image.png
使用开发者工具看了DOM结构才发现,使用插槽的话,是永远在arco-tree-node节点内,而这个DOM中同时还包括了缩进、间距、内容(插槽所在dom)。这三部分都是有自己的宽度的,所以当右击缩进和间距的时候,右击事件不会触发。所以如果想要当前行不管哪里右击都能触发自定义右击事件的,果断放弃这种方式吧

image.png

思路二:使用冒泡机制,直接将右击事件绑定到tree组件本身上

image.png

查看过arco-design-vue文档的小伙伴都知道,tree组件并没有提供contextmenu相关的回调函数,那怎么办呢?去github上看了,有这个需求的人不止我一个。但是到目前为止,没看到官方宣布提供了啥解决方案。
那怎么办?难道不实现了吗?还是说为了这个功能用其他tree插件来实现??不行,我不甘心啊!!!!
不死心的我终于在事件对象中知道到了“蛛丝马迹”。打印事件对象之后,发现这个事件对象的target属性值,多了两个属性: __vnode 和 __vueParentComponent。我们想要的数据会不会就在这两个属性值里????
通过不断的进行验证,果然验证了我的猜想,数据就藏在__vueParentComponent中。(皇天不负有心人啊,5555…)

image.png

这里我需要说明一下,每个节点的唯一标识我本来使用的是"key",但是这个attrs打印出来中没有这个属性,不光这个属性没有,我定义的节点类型中的title、isLeaf属性也没有。没办法就再加了一个id属性来存储节点的唯一标识值。(我猜测的是,这个attrs只能打印那些不被子节点props定义的属性,可能arco-design-vue的tree内部,所有 TreeNodeData 定义的属性都默认被props接收,所以打印不出来)
好了,到此问题解决了。如果有更好的解决办法,欢迎在评论区一起他讨论呀。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/124903.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高等数学教材重难点题型总结(四)不定积分

难点在于量级,不定积分一定要多练多见才能游刃有余~ 1.利用求导公式验证等式 2.计算不定积分

亚马逊秋季促销指南——如何更好的利用促销?

最新消息,亚马逊官方宣布将会在10月份举行Prime会员大促,覆盖多个站点,亚马逊卖家们一定要抓住这波促销机会,在这个秋季再冲一把!但是还有一些小白玩家可能对于亚马逊促销了解不够,那么接下来我要讲的这些准…

[SpringBoot3]博客管理系统(源码放评论区了)

八、博客管理系统 创建新的SpringBoot项目,综合运用以上知识点,做一个文章管理的后台应用。依赖: Spring WebLombokThymeleafMyBatis FrameworkMySQL DriverBean Validationhutool 需求:文章管理工作,发布新文章&…

Databend 数据集成方案 | Data Infra 第 15 期

本期的 Data Infra 直播活动我们邀请到了 Databend Cloud 研发工程师-韩山杰,与大家分享主题为《 Databend 数据集成方案》的相关知识。 在本次分享中,你将会学到在云上基于 Databend 及 Databend Cloud 构建应用,掌握 Databend CDC 和 Data…

基于改进莱维飞行和混沌映射的粒子群优化算法(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

[国产MCU]-W801开发实例-MQTT客户端通信

MQTT客户端通信 文章目录 MQTT客户端通信1、MQTT介绍2、W801的MQTT客户端相关API介绍3、代码实现本文将详细介绍如何在W801中使用MQTT协议通信。 1、MQTT介绍 MQTT 被称为消息队列遥测传输协议。它是一种轻量级消息传递协议,可通过简单的通信机制帮助资源受限的网络客户端。 …

Sumo中Traci.trafficlight详解(上)

Sumo中Traci.trafficlight详解(上) 记录慢慢学习traci的每一天,希望也能帮到你 文章目录 Sumo中Traci.trafficlight详解(上)Traci.trafficlight信号灯参数讲解1.getAllProgramLogics(self,tlsID)2.getBlockingVehicle…

排序算法的稳定性

稳定性:对于一个数,经过多次排序,保留一个数之间的相对次序 在基础类型数据上,稳定性用处不大 在非基础类型上,可以做到对于相同元素来说,排完序相同元素之间的相对次序不变 归并排序在merge的过程中先拷贝…

Vulnhub: Masashi: 1靶机

kali:192.168.111.111 靶机:192.168.111.236 信息收集 端口扫描 nmap -A -sC -v -sV -T5 -p- --scripthttp-enum 192.168.111.236查看80端口的robots.txt提示三个文件 snmpwalk.txt内容,tftp服务在1337端口 sshfolder.txt内容&#xff0c…

【电路参考】缓启动电路

一、外部供电直接上电可能导致的问题 1、在热拔插的过程中,两个连接器的机械接触,触点在瞬间会出现弹跳,电源不稳,发生震荡。这期间系统工作可能造成不稳定。 2、由于电路中存在滤波或大电解电容,在上电瞬间&#xff…

windows苹果商店上架ipa(基于appuploader)

参考文章: 上传ipa到appstore详细步骤 1、苹果商店地址:https://appstoreconnect.apple.com/apps 2、创建我的app 使用hbuilderx或apicloud云打包后,会生成一个ipa文件,而iphone是无法直接安装这个ipa文件的,需要将这…

大数据课程L2——网站流量项目的算法分析数据处理

文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 了解网站流量项目的算法分析; ⚪ 了解网站流量项目的数据处理; 一、项目的算法分析 1. 概述 网站流量统计是改进网站服务的重要手段之一,通过获取用户在网站的行为,可以分析出哪些内…

uni-app之android原生插件开发

一 插件简介 1.1 当HBuilderX中提供的能力无法满足App功能需求,需要通过使用Andorid/iOS原生开发实现时,可使用App离线SDK开发原生插件来扩展原生能力。 1.2 插件类型有两种,Module模式和Component模式 Module模式:能力扩展&…

WordPress(4)关于网站的背景图片更换

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、更改的位置1. 红色区域是要更换的随机的图片二、替换图片位置三.开启随机数量四.结束前言 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也…

[B题]2023 年全国大学生数学建模比赛思路、代码更新中.....

目录 💥1 概述 📚2 题目下载 🎉3 参考文献 🌈4 思路、代码更新..... 💥1 概述 单波束测深是利用声波在水中的传播特性来测量水体深度的技术。声波在均匀介质中作匀 速直线传播,在不同界面上产生反射&…

脚本:python实现樱花树

文章目录 代码效果 代码 from turtle import * from random import * from math import * def tree(n, l):pd () # 下笔# 阴影效果t cos ( radians ( heading () 45 ) ) / 8 0.25pencolor ( t, t, t )pensize ( n / 3 )forward ( l ) # 画树枝if n > 0:b random () *…

使用CUDA计算GPU的理论显存带宽

文章目录 一、显存带宽和理论显存带宽1. 显存带宽2. 理论显存带宽1)计算公式2)举例 二、利用CUDA计算理论显存带宽 一、显存带宽和理论显存带宽 1. 显存带宽 显存带宽是指显存和GPU计算单元之间的数据传输速率。 显存带宽越大,意味着数据传…

DAY07_Maven高级——分模块开发与设计依赖管理聚合与继承属性管理多环境配置与应用私服

目录 一 分模块开发与设计1. 分模块开发的意义问题导入模块拆分原则 2. 分模块开发问题导入2.1 创建Maven模块2.2 书写模块代码2.3 通过maven指令安装模块到本地仓库(install指令) 二 依赖管理1. 依赖传递问题导入 2. 可选依赖问题导入 3. 排除依赖问题导…

vue3哪个数组方法在vue2上做了升级处理

在 Vue 3 中,v-for 指令的数组更新行为进行了升级处理。在 Vue 2 中,当使用 v-for 渲染数组时,如果对数组进行了以下操作,Vue 无法检测到变化: 直接通过索引修改数组元素,例如 arr[0] newValue修改数组的…

C++学习笔记--函数重载(2)

文章目录 1.3、Function Templates Handling1.3.1、Template Argument Deduction1.3.2、Template Argument Substitution 1.4、Overload Resolution1.4.1、Candidate functions1.4.2、Viable functions1.4.3、Tiebreakers 1.5、走一遍完整的流程1.6、Name Mangling1.7、总结 1.…