iview的Tree组件设置Tooltip鼠标悬浮文字

在解决问题中考虑到的点：

树形组件要是过多，会出现鼠标滚轮，鼠标滚轮的时候也会触发鼠标悬浮事件，这时候tooltip会显示出上次滚轮经过的文字，并且会出现tooltip闪动。

解决方法：

使用防抖函数在组件的render里设置鼠标滚轮事件mousewheel

具体代码

data() {return {timeout: null,showTooltip: true}
}// tree 组件渲染 设置TooltiprenderContent(h, { root, node, data }) {let texts = "";if (data.title !== null &&data.title !== undefined &&data.title !== "") {texts = data.title;}return h("div",{style: {display: "inline-block",width: "100%",cursor: "pointer",},on: {// 监听鼠标滚轮 防抖函数解决滚轮滚动出现tooltip闪烁mousewheel: () => {// 不滚动时清除定时器 不显示tooltipclearTimeout(this.timeout);this.showTooltip = falsethis.timeout = setTimeout(() => {this.showTooltip = trueclearTimeout(this.timeout);}, 500);},// 设置事件为被动 不会因为主线程影响到这个事件passive: true},},this.showTooltip ? [h("Tooltip",{props: {placement: "top",transfer: true,maxWidth: 270,},},[texts,h("span",{slot: "content",style: {whiteSpace: "normal",},},data.title),]),] : [h("span",{slot: "content",style: {whiteSpace: "normal",},},data.title),]);},},

iview的Tree组件设置Tooltip鼠标悬浮文字相关推荐

vue antd a-table组件设置表头鼠标移入悬浮显示（自定义的表头）
1.看之前,请先异步另一篇文章 antdv table组件封装成全局组件以及携带自定义表头展示 2.具体需求,鼠标移入显示文本 3.参考大佬的文章:a-table组件设置表头鼠标移入悬浮显示 4.在公 ...
iview自定义Tree组件内容
介绍 Vue完整前后台项目介绍使用iview框架进行开发的话,一般都有展示树形结构数据的需求.那么就用的到其中的Tree组件了.但是其基本架构是满足不了我们的需求的,基本架构如下: 一般来说一条数据 ...
Winform中设置ZedGraph鼠标悬浮显示线上的点的坐标并自定义显示的内容
场景 Winform中设置ZedGraph鼠标悬浮显示距离最近曲线上的点的坐标值和X轴与Y轴的标题: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...
java鼠标样式设置,设置Echarts鼠标悬浮样式
tooltip: {//自定义tip show: true, trigger: 'axis', show: true, //default true showDelay: 0,//显示延时,添加显示延 ...
Winform中设置ZedGraph鼠标悬浮显示距离最近曲线上的点的坐标值和X轴与Y轴的标题
场景 Winform中设置ZedGraph鼠标双击获取距离最近曲线上的点的坐标值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
JAVAFX 鼠标悬浮提示 Tooltip组件
Tooltip组件说明 Tooltip控件,它可以设置给任何UI控件,当鼠标移动到该控件上时Tooltip就会显示. Tooltip类表示一个常见的UI组件,它常用于为其他UI控件显示附加的信息.通过 ...
ZedGraph的曲线的LineItem对象的Tag属性存储信息进而在鼠标悬浮时进行显示
场景 Winform中设置ZedGraph鼠标悬浮显示距离最近曲线上的点的坐标值和X轴与Y轴的标题: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...
vue中element ui 中tree组件怎么自定义前缀图标呢?
一问题饿了么ui 默认的图标样式是: 1. 一个箭头, 展开自动顺时针旋转90°, 以上的条件是该节点有子节点, 2. 如果是没有子节点的节点, 是默认空白图标的(这里我认为他不是没有, 而是有占 ...
layui使用tips_使用layer.tips实现鼠标悬浮时触发事件提示消息实现
代码: 你瞅啥!?过来试试! 方法一: function show(id) { layer.tips("左边么么哒", "#"+id+"", ...

iview的Tree组件设置Tooltip鼠标悬浮文字

在解决问题中考虑到的点：

解决方法：

具体代码

iview的Tree组件设置Tooltip鼠标悬浮文字相关推荐

最新文章

热门文章