el-tree 实现鼠标移入节点，显示功能按钮(船新版本)

Posted 2023-03-16

参考技术A 1.鼠标移动到节点上显示功能图标，鼠标移除隐藏
2.点击功能图标显示功能下拉菜单，使用el-dropdown插件
3.不需要设置el-tree属性expand-on-click-node为false，将节点事件和下拉框事件区分开
4.移入到节点DOM上就显示功能图标，而不是移动到文本DOM才显示（这个功能纠结和好久）

1.通过给数据动态加入dropdownShow属性来控制功能按钮的显示和隐藏，不然鼠标移入后，所有节点都会显示功能按钮
2.因为鼠标事件是绑定到span标签（即文本）的，所以要设置高度为100%，不然会出现从一个节点移动到另一个节点时，看到是移上去了但是功能按钮未显示的bug（节点间隔越大，越容易看到）。
3.通过@click.stop="()=>"禁用掉div部分的el-tree点击事件，实现节点事件和下拉菜单事件区分

小功能⭐️Unity Button按钮实现鼠标移入移出触发相应事件

文章目录

---

挂载在Button按钮上，继承IPointerEnterHandler和IPointerExitHandler接口，，实现移入和移出功能

using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
 
public class ZhiShiKuUIChange : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler

    private Image image;
    public Sprite[] sprites;
 
    void Start()
    
        image = GetComponent<Image>();
    
 
    public void OnPointerEnter(PointerEventData eventData)
    
        image.sprite = sprites[0];
    
 
    public void OnPointerExit(PointerEventData eventData)
    
        image.sprite = sprites[1];
    

接口复习：

接口定义、显示接口和隐式接口

大家还有什么问题，欢迎在下方留言！



如果你有 技术的问题 或 项目开发

都可以加下方联系方式

和我聊一聊你的故事🧡