v-dropdown 功能与性能优化任务清单

[TerryZ]

该 issue 汇总了 v-dropdown 近期推荐的功能与性能优化任务列表。每项均包含描述、预期实现、参考代码片段与测试点。

---

1. 懒渲染（Lazy Mount）

• 描述：仅在 dropdown 首次打开时挂载下拉内容，减少初始渲染成本。
• 预期实现：新增 lazy prop，默认 false。当为 true 时，仅在 visible 或首次 open 后渲染 DropdownContent。
• 参考代码片段：

<template>
  <DropdownContent v-if="visible || hasOpened" />
</template>
<script setup>
const hasOpened = ref(false)
watch(visible, v => v && (hasOpened.value = true))
</script>

• 测试点：
  • 挂载时不渲染内容，首次打开后内容挂载；关闭后内容保留/卸载取决于 lazy 设计。
  • 大内容或复杂 slot 下打开速度。

---

2. 位置调整节流（Throttle adjust）

• 描述：位置/尺寸变化导致的 dropdown 自动调整应节流，避免多次计算。
• 预期实现：对 adjustContentPosition 用 throttle/debounce，resize/scroll 事件中应用。
• 参考代码片段：

function useThrottle(fn, wait = 50) {
  let timer = null
  return (...args) => {
    if (timer) return
    timer = setTimeout(() => {
      fn(...args); timer = null
    }, wait)
  }
}
const scheduleAdjust = useThrottle(adjustContentPosition)
window.addEventListener('resize', scheduleAdjust)

• 测试点：
  • 连续 resize/scroll 下只触发有限次 adjust。
  • 检查动画流畅性。

---

3. ResizeObserver/监听器按需绑定

• 描述：优化 ResizeObserver、scroll 等监听器只在 dropdown 可见时绑定，关闭时解绑。
• 预期实现：open 时绑定监听器，close 时解绑。
• 参考代码片段：

onOpen() { observer.observe(target) }
onClose() { observer.disconnect() }

• 测试点：
  • 打开后自动调整，关闭释放资源，无内存泄漏。

---

4. 无障碍和键盘支持（A11y）

• 描述：下拉菜单支持键盘操作与屏幕阅读器。
• 预期实现：增加 role="menu"、tabindex，监听 ArrowUp/Down/Enter/Escape，aria-expanded/controls/haspopup。
• 参考代码片段：

<div role="menu" tabindex="0" @keydown="handleKeydown" aria-expanded="..." />

• 测试点：
  • 键盘可打开/关闭可选项，焦点合理流转。
  • NVDA/VoiceOver 读出 menu 项内容。

---

5. CSS 变量与主题化

• 描述：将颜色、圆角、阴影、层级等抽象为 CSS 变量，便于自定义主题。
• 预期实现：写入 style :root 或组件样式可继承 CSS vars。
• 参考代码片段：

:root { --dropdown-bg: #fff; --dropdown-radius: 6px; }
.dropdown { background: var(--dropdown-bg); border-radius: var(--dropdown-radius); }

• 测试点：
  • 自定义变量能全局改变样式，适配深色和多主题。

---

6. 长列表虚拟滚动支持

• 描述：下拉内容大量时建议内嵌虚拟滚动方案。
• 预期实现：支持 slot 内塞虚拟列表，或内置简单 virtualization（如可选 prop）
• 参考代码片段：

<virtual-list :items="options" v-slot="item">...</virtual-list>

• 测试点：
  • 1000+ 项时无卡顿，滚动平滑。

---

7. Nested dropdown/层级菜单优化

• 描述：多个嵌套 dropdown 时，边缘溢出与 appendTo/事件隔离需处理。
• 预期实现：定位逻辑递归考虑父级；事件捕获区分实例。
• 参考代码片段：

// open submenu appendTo parent, position adjust on parent scroll

• 测试点：
  • 双层 dropdown 不溢出/遮挡；父子关闭时互不影响。

---

8. 受控/非受控统一 API

• 描述：支持 v-model 统一受控和手动模式。
• 预期实现：visible/v-model/manual 三者协同；文档补充示例。
• 参考代码片段：

<Dropdown v-model:visible="dropdownOpen" />

• 测试点：
  • 手动与自动模式切换正常。

---

以上每项建议可单独拆分为 PR/task。优先级 1–4 推荐首期实现。