在解决问题中考虑到的点:
- 树形组件要是过多,会出现鼠标滚轮,鼠标滚轮的时候也会触发鼠标悬浮事件,这时候tooltip会显示出上次滚轮经过的文字,并且会出现tooltip闪动。
解决方法:
- 使用防抖函数在组件的render里设置鼠标滚轮事件mousewheel
具体代码
data() {
return {
timeout: null,
showTooltip: true
}
}
// tree 组件渲染 设置Tooltip
renderContent(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: () => {
// 不滚动时清除定时器 不显示tooltip
clearTimeout(this.timeout);
this.showTooltip = false
this.timeout = setTimeout(() => {
this.showTooltip = true
clearTimeout(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
),
]
);
},
},