当前位置：首页 > VUE

vue实现下拉实现

2026-01-14 00:41:29VUE

Vue 实现下拉菜单

使用原生 HTML 和 Vue 指令

通过 Vue 的 v-show 或 v-if 控制下拉菜单的显示与隐藏，结合事件监听实现交互。

<template>
  <div class="dropdown">
    <button @click="toggleDropdown">下拉菜单</button>
    <ul v-show="isOpen">
      <li v-for="item in items" :key="item.id" @click="selectItem(item)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

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

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown ul {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  width: 100%;
}
.dropdown li {
  padding: 8px;
  cursor: pointer;
  background: white;
}
.dropdown li:hover {
  background: #f0f0f0;
}
</style>

使用第三方组件库

Vue 生态中有许多成熟的 UI 库提供下拉组件，例如 Element UI、Vuetify 或 Ant Design 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 v-for="item in items" :key="item.id">
        {{ item.name }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' }
      ]
    };
  }
};
</script>

自定义可复用组件

封装一个可复用的下拉组件，通过插槽和 props 实现灵活配置。

<!-- Dropdown.vue -->
<template>
  <div class="custom-dropdown">
    <div class="dropdown-trigger" @click="toggle">
      <slot name="trigger"></slot>
    </div>
    <div class="dropdown-content" v-show="isOpen">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>

<!-- 使用示例 -->
<template>
  <Dropdown>
    <template v-slot:trigger>
      <button>点击展开</button>
    </template>
    <template v-slot:content>
      <div>自定义内容</div>
    </template>
  </Dropdown>
</template>