下拉菜单与命令面板

下拉菜单和命令面板用于「在一处触发一堆操作」。UDropdownMenu 点击按钮后弹出菜单项，UCommandPalette 是带搜索的快捷命令面板（类似 VS Code 的 Ctrl+P）。

本篇基于 /453.html 接好的环境，菜单依赖根容器 UApp。

UDropdownMenu 下拉菜单

UDropdownMenu 用 :items 传菜单项数组，每个项有 label、icon、onSelect 等字段；它的默认插槽放触发器（通常是一个按钮）。

<template>
  <UDropdownMenu :items="items">
    <UButton icon="i-lucide-ellipsis-vertical" color="neutral" variant="ghost" square />
  </UDropdownMenu>
</template>

<script setup>
const items = [
  { label: '编辑', icon: 'i-lucide-pencil', onSelect: () => console.log('编辑') },
  { label: '复制', icon: 'i-lucide-copy', onSelect: () => console.log('复制') },
  { type: 'separator' },
  { label: '删除', icon: 'i-lucide-trash', color: 'error', onSelect: () => console.log('删除') }
]
</script>

items 里几个常用字段。

• label 显示文字。
• icon 左侧图标（见 图标 Icon）。
• onSelect 点击该项时执行。
• type: 'separator' 画一条分割线。
• color: 'error' 让该项（如删除）显示为红色。

在 数据表格 UTable 的「操作列」里嵌一个 UDropdownMenu，是表格行操作的经典组合。

UCommandPalette 命令面板

UCommandPalette 用 v-model:open 控制显隐，:groups 传分组后的命令项，带搜索框，输入关键字即过滤。

<template>
  <UButton @click="open = true" icon="i-lucide-search">打开命令面板</UButton>

  <UCommandPalette v-model:open="open" :groups="groups" />
</template>

<script setup>
const open = ref(false)

const groups = [
  {
    id: 'actions',
    label: '操作',
    items: [
      { label: '新建用户', icon: 'i-lucide-user-plus', onSelect: () => console.log('新建') },
      { label: '导出数据', icon: 'i-lucide-download', onSelect: () => console.log('导出') }
    ]
  }
]
</script>

groups 是「分组数组」，每个分组有 id、label 和 items。用户输入时面板会自动按 label 过滤，适合功能很多的页面做快捷入口。

常见问题

参考资料

• Nuxt UI DropdownMenu 文档
• Nuxt UI CommandPalette 文档