如何在 Vue 中检测鼠标悬停

通常希望检测用户何时将鼠标悬停在 UI 元素上。 然后，当鼠标悬停在元素上时，我们可以自定义元素的外观或显示其他元素。

在 Hover 上设置元素样式

使用 CSS，我们可以使用 :hover 伪类轻松自定义悬停元素的外观：

.element {
  background: blue;
}.element:hover {
  background: lightblue;
}

当用户将鼠标悬停在其上时，这会将具有元素类的元素的背景颜色更改为浅蓝色。

但是 Vue 没有内置的悬停检测功能，所以我们必须自己实现它，使用状态变量并监听元素上的某些事件。

为了检测鼠标何时悬停在元素上，我们将监听 mouseenter 事件。 为了检测鼠标何时停止悬停在元素上，我们将监听 mouseleave 事件。

注意：虽然我们也可以监听 mouseover 事件来检测悬停，但这个事件是在 DOM 树中的一个元素和它的每一个祖先元素上触发的（即冒泡），这可能会在深层层次结构中导致严重的性能问题。 mouseenter 不会冒泡，因此我们可以使用它而不必担心这一点。

我们将使用一个变量来跟踪元素悬停状态：

<template>
  <div
    @mouseenter="hover = true"
    @mouseleave="hover = false"
  ></div>
</template><script>
export default {
  data() {
    return {
      hover: false,
    };
  },
};
</script>

然后，我们可以使用此变量有条件地向元素添加类以更改悬停时的外观：

<template>
  <div
    @mouseenter="hover = true"
    @mouseleave="hover = false"
    class="div"
    :class="{ 'div-hover': hover }"
  ></div>
</template><script>
export default {
  data() {
    return {
      hover: false,
    };
  },
};
</script><style>
.div {
  background-color: blue;
  width: 200px;
  height: 100px;
}.div-hover {
  background-color: yellow;
}
</style>

悬停时显示其他元素

当检测到鼠标悬停时，我们还可以显示其他元素。 例如，我们可以显示一个工具提示来显示有关元素的更多信息。

我们可以通过将状态变量传递给附加到元素的 v-if 指令来在悬停时显示另一个元素：

<template>
  <button
    @mouseenter="hover = true"
    @mouseleave="hover = false"
    class="div"
    :class="{ 'div-hover': hover }"
  >
    Button
  </button>
  <p v-if="hover">Tooltip</p>
</template><script>
export default {
  data() {
    return {
      hover: false,
    };
  },
};
</script>

检测 Vue 组件上的悬停

我们还可以使用 mouseenter 和 mouseleave 方法来检测自定义 Vue 组件上的悬停。

组件/StylesButton.vue

<template>
  <div>
    <button>Styled button</button>
  </div>
</template><style>
button {
  height: 30px;
  width: 100px;
  background-color: lightgreen;
}
</style>

应用程序.vue

<template>
  <styled-button
    @mouseenter="hover = true"
    @mouseleave="hover = false"
  ></styled-button>
  <p v-if="hover">Tooltip</p>
</template><script>
import StyledButton from './components/StyledButton.vue';export default {
  components: {
    StyledButton,
  },
  data() {
    return {
      hover: false,
    };
  },
};
</script>应用程序.vue

注意：如果你使用的是 Vue 2.x，你需要使用 .native 事件修饰符来监听 Vue 组件上的原生 DOM 事件：

<styled-button
  @mouseenter.native="hover = true"
  @mouseleave.native="hover = false"
></styled-button>

结论

虽然 Vue 没有对悬停检测的内置支持，但我们可以通过监听 mouseenter 和 mouseleave 事件并在这些事件的处理程序中更改布尔状态变量的值来自己实现它。