自定义antd Tree组件悬浮提示窗内容

以antd官网例子为例。当鼠标放到文字区域，鼠标悬浮窗显示文本内容，因为
<span>标签中的title属性，已经设置了内容。

而在TreeNode props中有disableCheckbox和disabled，分别代表禁用checkbox和禁掉响应。
而在这种禁用的场景下。一般来说鼠标悬浮窗提示都是固定内容。比如说***不可用之类的内容。而且在样式上也会不一样。而antd内置的title属性却没办法隐藏。

这里记录一下自己的一个解决方案。
1，给TreeNode增加一个className属性，比如disable-item-node.
2.绑定mouseover事件。找到下面span中的title属性，并设置为空

useEffect(()=>{
  const element = document.getElementsByClassNae('disable-item-node');
  if((let i =0; i<element.length;i++){
       element[i].children[2].setAttribute("title",""); 
     }
  }
},[])

3,css样式做一下自定义处理。

.disable-item-node{
  position:relative;
  &:hover::after{
      z-index:100;
      content:"...";
      display:inline-block;
      border:0.01rem solid #ddd;
      border-radius:0.01rem;
      position:absolute;
      top:0.2rem;
      left:1rem;
      background:#rgba(0,0,0,0.5);
      color:#fff;
  }

}

这样从视觉上就能解决这个问题。

Tags 标签

扩展阅读

加个好友，技术交流