当前位置：首页 > VUE

vue实现下拉菜单

2026-01-11 21:19:27VUE

实现下拉菜单的基本结构

使用 Vue 的 v-show 或 v-if 控制下拉菜单的显示与隐藏。通过点击按钮或父元素触发下拉状态切换。

<template>
  <div class="dropdown">
    <button @click="toggleDropdown">点击展开</button>
    <ul v-show="isOpen" class="dropdown-menu">
      <li v-for="item in items" :key="item.id" @click="selectItem(item)">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

数据与逻辑控制

在 Vue 组件的 data 中定义下拉状态和菜单项，通过方法切换状态。

<script>
export default {
  data() {
    return {
      isOpen: false,
      items: [
        { id: 1, text: "选项1" },
        { id: 2, text: "选项2" },
      ],
    };
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    selectItem(item) {
      console.log("选中:", item.text);
      this.isOpen = false; // 选择后关闭下拉
    },
  },
};
</script>

样式设计

为下拉菜单添加基础样式，确保悬浮和点击效果清晰。

<style scoped>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ddd;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 150px;
}
.dropdown-menu li {
  padding: 8px 12px;
  cursor: pointer;
}
.dropdown-menu li:hover {
  background: #f5f5f5;
}
</style>

点击外部关闭功能

通过监听文档点击事件，判断点击区域是否在下拉菜单外部，实现自动关闭。

<script>
export default {
  mounted() {
    document.addEventListener("click", this.handleClickOutside);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.handleClickOutside);
  },
  methods: {
    handleClickOutside(event) {
      if (!this.$el.contains(event.target)) {
        this.isOpen = false;
      }
    },
  },
};
</script>

使用第三方库（可选）

如需快速实现复杂交互，可借助 vue-popperjs 或 v-tooltip 等库，提供定位、动画等增强功能。

安装示例：

npm install vue-popperjs --save

集成代码：

vue实现下拉菜单

<template>
  <popper trigger="click" :options="{ placement: 'bottom' }">
    <button>点击展开</button>
    <template #content>
      <div class="dropdown-menu">
        <div v-for="item in items" :key="item.id">{{ item.text }}</div>
      </div>
    </template>
  </popper>
</template>