当前位置：首页 > VUE

Vue实现移入移出

2026-02-17 01:59:14VUE

Vue 实现移入移出事件

Vue 中可以通过 v-on 指令（或简写为 @）监听鼠标移入（mouseenter）和移出（mouseleave）事件，实现交互效果。以下是几种常见实现方式：

基础事件绑定

通过 @mouseenter 和 @mouseleave 直接绑定方法：

Vue实现移入移出

<template>
  <div 
    @mouseenter="handleMouseEnter" 
    @mouseleave="handleMouseLeave"
  >
    鼠标移入/移出区域
  </div>
</template>

<script>
export default {
  methods: {
    handleMouseEnter() {
      console.log('鼠标移入');
    },
    handleMouseLeave() {
      console.log('鼠标移出');
    }
  }
}
</script>

动态样式切换

结合 :class 或 :style 动态修改样式：

<template>
  <div 
    @mouseenter="isHovered = true"
    @mouseleave="isHovered = false"
    :class="{ 'active': isHovered }"
  >
    悬停效果
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHovered: false
    };
  }
}
</script>

<style>
.active {
  background-color: #f0f0f0;
}
</style>

使用 `v-show` 或 `v-if` 控制元素显示

悬停时显示隐藏内容：

Vue实现移入移出

<template>
  <div 
    @mouseenter="showTooltip = true"
    @mouseleave="showTooltip = false"
  >
    悬停查看提示
    <div v-show="showTooltip">这里是提示内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTooltip: false
    };
  }
}
</script>

事件修饰符

使用 .stop 或 .prevent 修饰符阻止事件冒泡或默认行为：

<div 
  @mouseenter.stop="handleEnter"
  @mouseleave.prevent="handleLeave"
>
  修饰符示例
</div>

自定义指令

封装复用逻辑（如全局悬停指令）：

// main.js
Vue.directive('hover', {
  bind(el, binding) {
    el.addEventListener('mouseenter', binding.value.enter);
    el.addEventListener('mouseleave', binding.value.leave);
  }
});

// 使用
<template>
  <div v-hover="{ enter: show, leave: hide }">自定义指令</div>
</template>