vue3.0如何实现下拉菜单的封装

发布时间：2021-09-24 10:46:26 作者：小新
来源：亿速云阅读：481

# Vue3.0如何实现下拉菜单的封装

## 前言

下拉菜单是Web开发中最常见的交互组件之一，广泛应用于导航栏、表单选择、操作菜单等场景。在Vue3.0中，我们可以充分利用Composition API和新的响应式系统来构建更灵活、可复用的下拉菜单组件。本文将详细介绍如何从零开始封装一个功能完善的下拉菜单组件。

## 一、需求分析与设计

### 1.1 基础功能需求
- 点击触发器显示/隐藏菜单
- 支持鼠标悬停触发
- 菜单项点击后自动关闭
- 支持键盘导航操作
- 点击外部区域自动关闭

### 1.2 进阶功能
- 支持自定义触发元素
- 支持菜单定位（上、下、左、右）
- 动画过渡效果
- 无障碍访问支持
- 多级子菜单支持

## 二、基础实现

### 2.1 组件结构设计

```html
<!-- Dropdown.vue -->
<template>
  <div class="dropdown-container" ref="container">
    <div 
      class="dropdown-trigger"
      @click="toggle"
      @mouseenter="handleMouseEnter"
      @mouseleave="handleMouseLeave"
    >
      <slot name="trigger"></slot>
    </div>
    
    <transition name="dropdown">
      <div 
        v-show="isOpen"
        class="dropdown-menu"
        ref="menu"
      >
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

2.2 核心逻辑实现

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  trigger: {
    type: String,
    default: 'click', // 'click' | 'hover'
    validator: value => ['click', 'hover'].includes(value)
  },
  placement: {
    type: String,
    default: 'bottom',
    validator: value => ['top', 'bottom', 'left', 'right'].includes(value)
  }
})

const isOpen = ref(false)
const container = ref(null)
const menu = ref(null)

// 切换菜单状态
const toggle = () => {
  if (props.trigger === 'click') {
    isOpen.value = !isOpen.value
  }
}

// 鼠标悬停处理
const handleMouseEnter = () => {
  if (props.trigger === 'hover') {
    isOpen.value = true
  }
}

const handleMouseLeave = () => {
  if (props.trigger === 'hover') {
    isOpen.value = false
  }
}

// 点击外部关闭
const handleClickOutside = (event) => {
  if (container.value && !container.value.contains(event.target)) {
    isOpen.value = false
  }
}

// 键盘导航
const handleKeydown = (event) => {
  if (!isOpen.value) return
  
  const items = menu.value?.querySelectorAll('.dropdown-item')
  if (!items || items.length === 0) return
  
  const currentIndex = Array.from(items).findIndex(item => 
    item === document.activeElement
  )
  
  switch (event.key) {
    case 'Escape':
      isOpen.value = false
      break
    case 'ArrowDown':
      event.preventDefault()
      const nextIndex = (currentIndex + 1) % items.length
      items[nextIndex]?.focus()
      break
    case 'ArrowUp':
      event.preventDefault()
      const prevIndex = (currentIndex - 1 + items.length) % items.length
      items[prevIndex]?.focus()
      break
  }
}

// 生命周期钩子
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
  document.addEventListener('keydown', handleKeydown)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
  document.removeEventListener('keydown', handleKeydown)
})
</script>

2.3 样式实现

<style scoped>
.dropdown-container {
  position: relative;
  display: inline-block;
}

.dropdown-trigger {
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  z-index: 1000;
  min-width: 120px;
  padding: 8px 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 定位方向 */
.dropdown-menu[data-placement="top"] {
  bottom: 100%;
  margin-bottom: 8px;
}

.dropdown-menu[data-placement="bottom"] {
  top: 100%;
  margin-top: 8px;
}

.dropdown-menu[data-placement="left"] {
  right: 100%;
  margin-right: 8px;
}

.dropdown-menu[data-placement="right"] {
  left: 100%;
  margin-left: 8px;
}

/* 过渡动画 */
.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.2s ease;
  transform-origin: top center;
}

.dropdown-enter-from,
.dropdown-leave-to {
  opacity: 0;
  transform: scaleY(0.8);
}
</style>

三、功能扩展

3.1 菜单项组件封装

<!-- DropdownItem.vue -->
<template>
  <li
    class="dropdown-item"
    :class="{ 'is-disabled': disabled }"
    @click="handleClick"
    @keydown.enter="handleClick"
    tabindex="0"
  >
    <slot></slot>
  </li>
</template>

<script setup>
const props = defineProps({
  disabled: Boolean
})

const emit = defineEmits(['click'])

const handleClick = () => {
  if (!props.disabled) {
    emit('click')
  }
}
</script>

<style scoped>
.dropdown-item {
  padding: 8px 16px;
  list-style: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

.dropdown-item.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>

3.2 动态定位计算

// 在Dropdown.vue中添加
import { nextTick } from 'vue'

const updatePosition = async () => {
  await nextTick()
  if (!isOpen.value || !container.value || !menu.value) return
  
  const containerRect = container.value.getBoundingClientRect()
  const menuRect = menu.value.getBoundingClientRect()
  
  switch (props.placement) {
    case 'top':
      menu.value.style.left = `${containerRect.left}px`
      menu.value.style.bottom = `${window.innerHeight - containerRect.top}px`
      break
    case 'bottom':
      menu.value.style.left = `${containerRect.left}px`
      menu.value.style.top = `${containerRect.bottom}px`
      break
    case 'left':
      menu.value.style.right = `${window.innerWidth - containerRect.left}px`
      menu.value.style.top = `${containerRect.top}px`
      break
    case 'right':
      menu.value.style.left = `${containerRect.right}px`
      menu.value.style.top = `${containerRect.top}px`
      break
  }
  
  // 边界检查
  const viewportWidth = window.innerWidth
  const viewportHeight = window.innerHeight
  
  if (menuRect.right > viewportWidth) {
    menu.value.style.left = `${viewportWidth - menuRect.width}px`
  }
  
  if (menuRect.bottom > viewportHeight) {
    menu.value.style.top = `${viewportHeight - menuRect.height}px`
  }
}

watch(isOpen, (val) => {
  if (val) {
    updatePosition()
    window.addEventListener('resize', updatePosition)
    window.addEventListener('scroll', updatePosition, true)
  } else {
    window.removeEventListener('resize', updatePosition)
    window.removeEventListener('scroll', updatePosition, true)
  }
})

3.3 多级子菜单支持

<!-- DropdownSubmenu.vue -->
<template>
  <dropdown :trigger="trigger" :placement="placement">
    <template #trigger>
      <dropdown-item>
        <slot name="title"></slot>
        <span class="submenu-arrow">▶</span>
      </dropdown-item>
    </template>
    
    <slot></slot>
  </dropdown>
</template>

<script setup>
import Dropdown from './Dropdown.vue'
import DropdownItem from './DropdownItem.vue'

const props = defineProps({
  trigger: {
    type: String,
    default: 'hover'
  },
  placement: {
    type: String,
    default: 'right'
  }
})
</script>

<style scoped>
.submenu-arrow {
  margin-left: 8px;
  font-size: 0.8em;
}
</style>

四、使用示例

4.1 基础使用

<template>
  <dropdown>
    <template #trigger>
      <button>点击我</button>
    </template>
    
    <dropdown-item @click="handleAction('edit')">编辑</dropdown-item>
    <dropdown-item @click="handleAction('delete')">删除</dropdown-item>
    <dropdown-item disabled>禁用项</dropdown-item>
  </dropdown>
</template>

<script setup>
import Dropdown from './components/Dropdown.vue'
import DropdownItem from './components/DropdownItem.vue'

const handleAction = (action) => {
  console.log(`执行操作: ${action}`)
}
</script>

4.2 多级菜单

<template>
  <dropdown trigger="hover">
    <template #trigger>
      <button>导航菜单</button>
    </template>
    
    <dropdown-item>首页</dropdown-item>
    <dropdown-submenu>
      <template #title>产品</template>
      
      <dropdown-item>产品列表</dropdown-item>
      <dropdown-item>产品分类</dropdown-item>
      <dropdown-submenu>
        <template #title>子菜单</template>
        <dropdown-item>子项1</dropdown-item>
        <dropdown-item>子项2</dropdown-item>
      </dropdown-submenu>
    </dropdown-submenu>
    <dropdown-item>关于我们</dropdown-item>
  </dropdown>
</template>

五、优化与最佳实践

5.1 性能优化

使用事件委托减少事件监听器数量
防抖处理resize和scroll事件
使用CSS will-change属性优化动画性能

5.2 无障碍访问

添加ARIA属性
支持键盘导航
焦点管理

5.3 测试建议

单元测试核心交互逻辑
E2E测试用户交互流程
跨浏览器兼容性测试

六、总结

本文详细介绍了如何在Vue3.0中封装一个功能完善的下拉菜单组件，包括基础实现、功能扩展、使用示例以及优化建议。通过组合式API和插槽机制，我们可以构建出高度可定制、易于维护的组件。这种封装思路也可以应用于其他复杂组件的开发中。

完整的组件代码已经包含了响应式设计、动画过渡、键盘导航等现代Web组件应有的特性，开发者可以根据实际需求进一步扩展或调整。

附录

完整组件代码

[GitHub仓库链接]