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

HeiYanjing

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

而在TreeNode props中有disableCheckboxdisabled,分别代表禁用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;
  }

}

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

阅读 266

生活本就很艰难,且行且珍惜。

10 声望
0 粉丝
0 条评论
你知道吗?

生活本就很艰难,且行且珍惜。

10 声望
0 粉丝
宣传栏