如何利用 vue实现鼠标悬停时显示元素或文本

实现鼠标悬停时显示元素或文本的功能，可以使用 Vue 组件中的 v-on: 指令和 v-bind: 指令。具体步骤如下：

1. 为需要绑定悬停事件的元素添加绑定

在 Vue 模板中，我们可以为需要绑定悬停事件的元素添加 v-on: 指令，以监听鼠标悬停事件。通常情况下，我们将 v-on: 指令绑定 mouseover 事件。例如：

<template>
  <div>
    <p v-on:mouseover="showText">鼠标悬停时显示此处文本</p>
  </div>
</template>

如果我们需要动态绑定元素的属性样式，如 display 属性，可以使用 v-bind: 指令，例如：

<template>
  <div>
    <p v-on:mouseover="showText" v-bind:style="{ display: isShow ? 'block' : 'none' }">
      鼠标悬停时显示此处文本
    </p>
  </div>
</template>

在该例中，我们绑定了 style 属性，根据数据属性 isShow 的值动态更新元素的显示与隐藏。

2. 实现悬停时显示文本的方法

针对上面的代码，我们需要实现 showText 方法来控制文本的显示与隐藏。该方法通常可以定义在 Vue 实例的 methods 属性中，例如：

<template>
  <div>
    <p v-on:mouseover="showText" v-bind:style="{ display: isShow ? 'block' : 'none' }">
      鼠标悬停时显示此处文本
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    }
  },
  methods: {
    showText() {
      this.isShow = true
    }
  }
}
</script>

可以看到，在 showText 方法中我们将数据属性 isShow 的值更新为 true，以控制文本的显示与隐藏。当鼠标移开时，文本会隐藏起来。

示例1 - 实现图片悬停时显示标题

下面我们以一个具体的示例来展示如何实现图片悬停时显示标题的功能。具体步骤如下：

<template>
  <div>
    <div v-for="img in imgList" :key="img.id" class="img-wrap">
      <img v-bind:src="img.src" v-on:mouseover="showTitle(img.id)" v-on:mouseout="hideTitle(img.id)" />
      <div class="title-wrap" v-bind:class="{ active: activeId === img.id }">
        <h3>{{ img.title }}</h3>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        { id: 1, src: 'https://picsum.photos/200/300/?random=1', title: '美丽的风景' },
        { id: 2, src: 'https://picsum.photos/200/300/?random=2', title: '可爱的小猫' },
        { id: 3, src: 'https://picsum.photos/200/300/?random=3', title: '喜欢的花朵' },
      ],
      activeId: null,
    }
  },
  methods: {
    showTitle(id) {
      this.activeId = id
    },
    hideTitle(id) {
      this.activeId = null
    },
  },
}
</script>

该示例中，我们使用 v-for 指令循环渲染图片列表，为每个图片绑定 mouseover 和 mouseout 事件。同时，我们使用 v-bind: 指令和计算属性 activeId 控制标题的显示与隐藏。当鼠标移入某个图片时，对应的标题会显示；当鼠标移开时，标题就会自动隐藏。

示例2 - 实现气泡提示悬停时显示

下面我们再来看看如何实现气泡提示的悬停时显示。具体步骤如下：

<template>
  <div>
    <div v-for="(item, index) in list" :key="index" class="tooltip-wrap" v-on:mouseover="showTooltip($event, item)" v-on:mouseout="hideTooltip($event)">
      <span>{{ item.text }}</span>
      <div class="tooltip" v-bind:class="{ active: item.show }">{{ item.tooltip }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { text: '图标1', tooltip: '这是图标1的提示信息', show: false },
        { text: '图标2', tooltip: '这是图标2的提示信息', show: false },
        { text: '图标3', tooltip: '这是图标3的提示信息', show: false },
      ],
    }
  },
  methods: {
    showTooltip(event, item) {
      item.show = true
      const tooltipEl = event.target.nextSibling
      const targetRect = event.target.getBoundingClientRect()
      tooltipEl.style.left = targetRect.left + 'px'
      tooltipEl.style.top = targetRect.top - 40 + 'px'
    },
    hideTooltip(event) {
      const tooltipEl = event.target.nextSibling
      tooltipEl.style.left = '-9999px'
      tooltipEl.style.top = '-9999px'
      setTimeout(() => {
        event.target.nextSibling.style.opacity = 0
      }, 200)
      setTimeout(() => {
        event.target.nextSibling.style.display = 'none'
      }, 400)
    },
  },
}
</script>

在该示例中，我们使用 v-for 指令循环渲染气泡提示列表，为每个元素绑定 mouseover 和 mouseout 事件。我们通过控制 item.show 的值来控制气泡提示的显示与隐藏。同时，我们使用 event.target 和计算属性控制气泡提示的位置和样式。

以上就是利用 Vue 实现鼠标悬停时显示元素或文本的完整攻略。