Vue2 + ElementUI 实现悬停提示

2023-09-20 10:26:12

Vue2 作为一款轻量且功能强大的 JavaScript 框架，在构建现代 Web 应用程序时备受青睐。ElementUI 是一款优秀的 UI 组件库，为 Vue2 提供了丰富的预制组件，可以轻松构建美观且用户友好的界面。本篇文章将深入探讨如何使用 Vue2 + ElementUI 实现悬停提示功能，同时兼顾内部和外部元素的提示显示。

内部元素提示：el-tooltip

Vue2 中提供了 el-tooltip 组件，专门用于为内部元素提供悬停提示。el-tooltip 组件包含两个插槽：content 和 trigger。content 插槽用于指定提示内容，而 trigger 插槽用于定义触发提示的元素。

使用 el-tooltip 组件实现内部元素悬停提示非常简单，示例代码如下：

<template>
  <div>
    <el-tooltip
      content="这是一个内部元素提示"
      placement="top"
    >
      <button>内部元素</button>
    </el-tooltip>
  </div>
</template>

外部元素提示：mouseover 和 mouseout 事件

对于外部元素，无法直接使用 el-tooltip 组件，需要通过 mouseover 和 mouseout 事件来控制提示框的显示和隐藏。需要注意的是，这两个事件需要进行节流处理，以防止频繁触发。

节流处理可以通过 Lodash 库中的 throttle 函数实现，示例代码如下：

<template>
  <div>
    <button
      @mouseover="handleMouseover"
      @mouseout="handleMouseout"
    >
      外部元素
    </button>
    <div
      ref="tooltip"
      v-if="showTooltip"
      :style="{ top: y + 'px', left: x + 'px' }"
    >
      这是一个外部元素提示
    </div>
  </div>
</template>

<script>
import { throttle } from 'lodash';

export default {
  data() {
    return {
      showTooltip: false,
      x: 0,
      y: 0,
    };
  },
  methods: {
    handleMouseover(e) {
      this.x = e.clientX;
      this.y = e.clientY;
      this.showTooltip = true;
    },
    handleMouseout() {
      this.showTooltip = false;
    },
  },
};
</script>