vue实现 hover

Vue 实现 Hover 效果的方法

在 Vue 中实现 hover 效果可以通过多种方式实现，以下是几种常见的方法：

使用 CSS 伪类

通过 CSS 的 :hover 伪类直接在样式文件中定义 hover 效果，无需额外的 JavaScript 代码。

<template>
  <button class="hover-button">Hover Me</button>
</template>

<style>
.hover-button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.hover-button:hover {
  background-color: #45a049;
}
</style>

使用 Vue 的 @mouseover 和 @mouseleave 事件

通过 Vue 的事件监听器动态改变样式或类名。

<template>
  <button 
    @mouseover="isHovered = true"
    @mouseleave="isHovered = false"
    :class="{ 'hover-button': isHovered }"
  >
    Hover Me
  </button>
</template>

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

<style>
.hover-button {
  background-color: #45a049;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
</style>

使用动态绑定样式

通过 :style 动态绑定样式对象，根据 hover 状态改变样式。

<template>
  <button 
    @mouseover="hoverStyle.backgroundColor = '#45a049'"
    @mouseleave="hoverStyle.backgroundColor = '#4CAF50'"
    :style="hoverStyle"
  >
    Hover Me
  </button>
</template>

<script>
export default {
  data() {
    return {
      hoverStyle: {
        backgroundColor: '#4CAF50',
        color: 'white',
        padding: '10px 20px',
        border: 'none',
        cursor: 'pointer',
        transition: 'background-color 0.3s'
      }
    };
  }
};
</script>

使用第三方库（如 VueUse）

VueUse 提供了 useMouse 或 useHover 等工具，可以更便捷地实现 hover 效果。

<template>
  <button ref="button" :class="{ 'hover-button': isHovered }">
    Hover Me
  </button>
</template>

<script>
import { useHover } from '@vueuse/core';

export default {
  setup() {
    const button = ref(null);
    const isHovered = useHover(button);

    return {
      button,
      isHovered
    };
  }
};
</script>

<style>
.hover-button {
  background-color: #45a049;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
</style>

使用 CSS 变量

结合 CSS 变量和 Vue 的动态绑定，实现更灵活的 hover 效果。

<template>
  <button 
    @mouseover="hoverColor = '#45a049'"
    @mouseleave="hoverColor = '#4CAF50'"
    class="hover-button"
    :style="{ '--hover-color': hoverColor }"
  >
    Hover Me
  </button>
</template>

<script>
export default {
  data() {
    return {
      hoverColor: '#4CAF50'
    };
  }
};
</script>

<style>
.hover-button {
  background-color: var(--hover-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}
</style>

以上方法可以根据具体需求选择使用，CSS 伪类适用于简单场景，而 Vue 的事件绑定和动态样式适用于更复杂的交互逻辑。