命令菜单

快速、可组合、无样式的命令菜单。

Component Source API Reference
Suggestions
Calendar
Search Emoji
Calculator
Settings
Profile⌘P
Billing⌘B
Settings⌘S

安装 ​

pnpm dlx shadcn-vue@latest add command

用法 ​

vue
<script setup lang="ts">
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from '@/components/ui/command'
</script>

<template>
  <Command>
    <CommandInput placeholder="输入命令或搜索..." />
    <CommandList>
      <CommandEmpty>未找到结果。</CommandEmpty>
      <CommandGroup heading="建议">
        <CommandItem value="calendar">
          日历
        </CommandItem>
        <CommandItem value="search-emoji">
          搜索表情
        </CommandItem>
        <CommandItem value="calculator">
          计算器
        </CommandItem>
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup heading="设置">
        <CommandItem value="profile">
          个人资料
        </CommandItem>
        <CommandItem value="billing">
          账单
        </CommandItem>
        <CommandItem value="settings">
          设置
        </CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</template>

示例 ​

对话框 ​

Press ⌘J

要在对话框中显示命令菜单，请使用 <CommandDialog /> 组件。

vue
<script setup lang="ts">
import { useMagicKeys } from '@vueuse/core'

import { ref, watch } from 'vue'

const open = ref(false)

const keys = useMagicKeys()
const CmdJ = keys['Cmd+J']

function handleOpenChange() {
  open.value = !open.value
}

watch(CmdJ, (v) => {
  if (v)
    handleOpenChange()
})
</script>

<template>
  <div>
    <p class="text-sm text-muted-foreground">
      按下
      <kbd
        class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
      >
        <span class="text-xs">⌘</span>J
      </kbd>
    </p>
    <CommandDialog :open="open" @update:open="handleOpenChange">
      <CommandInput placeholder="输入命令或搜索..." />
      <CommandList>
        <CommandEmpty>未找到结果。</CommandEmpty>
        <CommandGroup heading="建议">
          <CommandItem value="calendar">
            日历
          </CommandItem>
          <CommandItem value="search-emoji">
            搜索表情
          </CommandItem>
          <CommandItem value="calculator">
            计算器
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="设置">
          <CommandItem value="profile">
            个人资料
          </CommandItem>
          <CommandItem value="billing">
            账单
          </CommandItem>
          <CommandItem value="settings">
            设置
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  </div>
</template>


弹出框 ​

Status

下拉菜单 ​

featureCreate a new project

响应式 ​

您可以通过在桌面上使用 <Popover /> 组件，在移动设备上使用 <Drawer /> 组件来创建响应式组合框。

表单 ​

This is the language that will be used in the dashboard.

Edit this page on GitHub