当前位置：首页 > VUE

vue实现下拉

2026-02-11 03:28:39VUE

Vue 实现下拉菜单

使用 Vue 实现下拉菜单可以通过原生 HTML 结合 Vue 的指令和事件处理来完成。以下是一个简单的实现方法：

模板部分

<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>

脚本部分

<script>
export default {
  data() {
    return {
      isOpen: false,
      items: [
        { id: 1, text: '选项一' },
        { id: 2, text: '选项二' },
        { id: 3, text: '选项三' }
      ]
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
    selectItem(item) {
      console.log('选中:', item.text);
      this.isOpen = false;
    }
  }
}
</script>

样式部分

<style>
.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;
}

.dropdown-menu li {
  padding: 8px 16px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background: #f5f5f5;
}
</style>

使用第三方库实现

如果需要更复杂的功能，可以考虑使用第三方 Vue 组件库：

Element UI

<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      下拉菜单<i class="el-icon-arrow-down"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>选项一</el-dropdown-item>
      <el-dropdown-item>选项二</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

Vuetify

vue实现下拉

<template>
  <v-menu>
    <template v-slot:activator="{ on }">
      <v-btn v-on="on">下拉菜单</v-btn>
    </template>
    <v-list>
      <v-list-item v-for="(item, index) in items" :key="index">
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
</template>