当前位置：首页 > VUE

vue实现悬浮菜单

2026-02-17 15:16:31VUE

Vue 实现悬浮菜单的方法

使用 v-show 或 v-if 控制显示

通过绑定鼠标事件（如 @mouseenter 和 @mouseleave）动态切换菜单的显示状态。示例代码：

<template>
  <div @mouseenter="showMenu = true" @mouseleave="showMenu = false">
    <button>触发菜单</button>
    <div v-show="showMenu" class="menu">
      <ul>
        <li>菜单项1</li>
        <li>菜单项2</li>
      </ul>
    </div>
  </div>
</template>

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

<style>
.menu {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
}
</style>

结合 CSS 过渡动画

通过 Vue 的 <transition> 组件实现平滑的显示/隐藏效果：

<template>
  <div @mouseenter="showMenu = true" @mouseleave="showMenu = false">
    <button>触发菜单</button>
    <transition name="fade">
      <div v-show="showMenu" class="menu">...</div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用第三方组件库

若项目已引入组件库（如 Element UI），可直接使用其提供的 Dropdown 组件：

<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      触发菜单<i class="el-icon-arrow-down"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>选项1</el-dropdown-item>
      <el-dropdown-item>选项2</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

动态定位菜单

通过计算鼠标位置实现跟随式悬浮菜单：

<template>
  <div @mousemove="updatePosition">
    <div :style="{ left: x + 'px', top: y + 'px' }" v-show="showMenu" class="menu">...</div>
  </div>
</template>

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