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

最新推荐文章于 2025-09-26 03:58:44 发布

原创最新推荐文章于 2025-09-26 03:58:44 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种解决树形组件中因鼠标滚轮事件触发Tooltip闪烁问题的方法。通过使用防抖函数，当鼠标滚轮滚动时，可以有效避免Tooltip的频繁显示与隐藏，提升用户体验。

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

树形组件要是过多，会出现鼠标滚轮，鼠标滚轮的时候也会触发鼠标悬浮事件，这时候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
              ),
            ]
      );
    },
  },