当前位置：首页 > VUE

vue实现列表悬浮菜单

2026-02-25 05:32:30VUE

Vue 实现列表悬浮菜单的方法

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

在列表项上添加鼠标事件监听，通过 v-show 或 v-if 控制悬浮菜单的显示与隐藏。v-show 通过 CSS 的 display 属性切换，适合频繁切换的场景；v-if 会销毁和重建 DOM，适合不频繁切换的场景。

<template>
  <div>
    <div 
      v-for="item in list" 
      :key="item.id"
      @mouseenter="showMenu(item.id)"
      @mouseleave="hideMenu(item.id)"
    >
      {{ item.name }}
      <div v-show="activeItemId === item.id" class="menu">
        <button @click="handleEdit(item)">编辑</button>
        <button @click="handleDelete(item)">删除</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' }
      ],
      activeItemId: null
    };
  },
  methods: {
    showMenu(id) {
      this.activeItemId = id;
    },
    hideMenu() {
      this.activeItemId = null;
    },
    handleEdit(item) {
      console.log('编辑', item);
    },
    handleDelete(item) {
      console.log('删除', item);
    }
  }
};
</script>

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

使用 CSS 控制悬浮效果

vue实现列表悬浮菜单

通过纯 CSS 的 :hover 伪类实现悬浮菜单，无需 JavaScript 逻辑。这种方法简单高效，适合不需要复杂交互的场景。

<template>
  <div>
    <div v-for="item in list" :key="item.id" class="list-item">
      {{ item.name }}
      <div class="menu">
        <button @click="handleEdit(item)">编辑</button>
        <button @click="handleDelete(item)">删除</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' }
      ]
    };
  },
  methods: {
    handleEdit(item) {
      console.log('编辑', item);
    },
    handleDelete(item) {
      console.log('删除', item);
    }
  }
};
</script>

<style>
.list-item {
  position: relative;
}
.menu {
  display: none;
  position: absolute;
  background: white;
  border: 1px solid #ddd;
  padding: 5px;
}
.list-item:hover .menu {
  display: block;
}
</style>

使用第三方组件库

vue实现列表悬浮菜单

如果需要更复杂的悬浮菜单功能，可以借助第三方组件库如 Element UI、Ant Design Vue 等。这些库提供了现成的悬浮菜单组件，支持丰富的配置和交互。

以 Element UI 为例：

<template>
  <div>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-dropdown>
            <span class="el-dropdown-link">
              菜单<i class="el-icon-arrow-down"></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleEdit(scope.row)">编辑</el-dropdown-item>
                <el-dropdown-item @click="handleDelete(scope.row)">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' }
      ]
    };
  },
  methods: {
    handleEdit(item) {
      console.log('编辑', item);
    },
    handleDelete(item) {
      console.log('删除', item);
    }
  }
};
</script>

注意事项