arco-design-vue的tree组件实现右击事件
业务中需要使用到tree组件,并且还要对tree实现自定义鼠标右击事件。在arco-design-vue的文档中,可以明确的看到,tree组件并没有右击事件的相关回调,那要如何实现呢???
这里提供两种思路:
1、使用插槽,在插槽中对DOM实现contextmenu事件(会有问题,下面会说)
2、使用事件冒泡机制,对tree实现contextmenu事件
思路一:使用插槽对自定义实现contextmenu事件
本以为这样就万事大吉了,万万没想到测试给我提了一个bug。这个右击事件,“顾尾不顾头”,即在节点前面的空白地方右击无效。
使用开发者工具看了DOM结构才发现,使用插槽的话,是永远在arco-tree-node节点内,而这个DOM中同时还包括了缩进、间距、内容(插槽所在dom)。这三部分都是有自己的宽度的,所以当右击缩进和间距的时候,右击事件不会触发。所以如果想要当前行不管哪里右击都能触发自定义右击事件的,果断放弃这种方式吧
思路二:使用冒泡机制,直接将右击事件绑定到tree组件本身上
查看过arco-design-vue文档的小伙伴都知道,tree组件并没有提供contextmenu相关的回调函数,那怎么办呢?去github上看了,有这个需求的人不止我一个。但是到目前为止,没看到官方宣布提供了啥解决方案。
那怎么办?难道不实现了吗?还是说为了这个功能用其他tree插件来实现??不行,我不甘心啊!!!!
不死心的我终于在事件对象中知道到了“蛛丝马迹”。打印事件对象之后,发现这个事件对象的target属性值,多了两个属性: __vnode 和 __vueParentComponent。我们想要的数据会不会就在这两个属性值里????
通过不断的进行验证,果然验证了我的猜想,数据就藏在__vueParentComponent中。(皇天不负有心人啊,5555…)
这里我需要说明一下,每个节点的唯一标识我本来使用的是"key",但是这个attrs打印出来中没有这个属性,不光这个属性没有,我定义的节点类型中的title、isLeaf属性也没有。没办法就再加了一个id属性来存储节点的唯一标识值。(我猜测的是,这个attrs只能打印那些不被子节点props定义的属性,可能arco-design-vue的tree内部,所有 TreeNodeData 定义的属性都默认被props接收,所以打印不出来)
好了,到此问题解决了。如果有更好的解决办法,欢迎在评论区一起他讨论呀。