内容搜索

一个随时可用的命令面板，可添加到您的文档中。

此组件仅在安装了 @nuxt/content 模块时可用。

用法

ContentSearch 组件扩展了 CommandPalette 组件，因此你可以传递任何属性，例如 icon、placeholder 等。

使用 files 和 navigation 属性，以及你使用 @nuxt/content 中的 files 和 navigation 的 queryCollectionSearchSections 和 queryCollectionNavigation 组合式函数获取到的值。

你可以通过按 K 键打开 CommandPalette，也可以使用 ContentSearchButton 组件或使用 useContentSearch 组合式函数：const { open } = useContentSearch()。

快捷键

使用 shortcut 属性更改在 defineShortcuts 中用于打开 ContentSearch 组件的快捷键。默认为 meta_k ( K)。

app.vue

<template>
  <UApp>
    <ClientOnly>
      <LazyUContentSearch
        v-model:search-term="searchTerm"
        shortcut="meta_k"
        :files="files"
        :navigation="navigation"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </UApp>
</template>

颜色模式

默认情况下，一组命令将被添加到命令面板中，以便你可以在亮色和暗色模式之间切换。这只有在特定页面中未强制设置 colorMode 时才生效，这可以通过 definePageMeta 实现

pages/index.vue

<script setup lang="ts">
definePageMeta({
  colorMode: 'dark'
})
</script>

你可以通过将 color-mode 属性设置为 false 来禁用此行为

app.vue

<template>
  <UApp>
    <ClientOnly>
      <LazyUContentSearch
        v-model:search-term="searchTerm"
        :color-mode="false"
        :files="files"
        :navigation="navigation"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </UApp>
</template>

示例

在 `app.vue` 中

在你的 app.vue 或布局中使用 ContentSearch 组件

app.vue

<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('content'), {
  server: false
})

const links = [{
  label: 'Docs',
  icon: 'i-lucide-book',
  to: '/docs/getting-started'
}, {
  label: 'Components',
  icon: 'i-lucide-box',
  to: '/docs/components'
}, {
  label: 'Showcase',
  icon: 'i-lucide-presentation',
  to: '/showcase'
}]

const searchTerm = ref('')
</script>

<template>
  <UApp>
    <ClientOnly>
      <LazyUContentSearch
        v-model:search-term="searchTerm"
        :files="files"
        shortcut="meta_k"
        :navigation="navigation"
        :links="links"
        :fuse="{ resultLimit: 42 }"
      />
    </ClientOnly>
  </UApp>
</template>

建议将 ContentSearch 组件包裹在ClientOnly组件中，以便它不在服务器上渲染。

API

属性

属性	默认值	类型
`尺寸`	`'md'`	`"sm" \| "md" \| "xs" \| "lg" \| "xl"`
`图标`	`appConfig.ui.icons.search`	`any` 输入框中显示的图标。
`placeholder`	`t('commandPalette.placeholder')`	`string` 输入框的占位文本。
`autofocus`	`true`	`boolean` 组件挂载时自动聚焦输入框。
`loading`		`boolean` 当为 `true` 时，将显示加载图标。
`loadingIcon`	`appConfig.ui.icons.loading`	`any` 当 `loading` prop 为 `true` 时显示的图标。
`close`	`true`	`boolean \| Omit<ButtonProps, LinkPropsKeys>` 在输入框中显示一个关闭按钮（例如在模态框中使用时很有用）。 `{ size: 'md', color: 'neutral', variant: 'ghost' }`
`closeIcon`	`appConfig.ui.icons.close`	`any` 关闭按钮中显示的图标。
`快捷键`	`'meta_k'`	`string` 打开搜索的键盘快捷键（由`defineShortcuts`)
`links`		`T[]` 作为命令面板中第一个组显示的链接组。
`导航`		`ContentNavigationItem[]`
`分组`		`CommandPaletteGroup<ContentSearchItem>[]` 在导航和颜色模式组之间显示的自定义组。
`文件`		`ContentSearchFile[]`
`fuse`	`{ fuseOptions: { includeMatches: true } }`	`n<T>` 用于 `useFuse` 的选项useFuse传递给CommandPalette.
`colorMode`	`true`	`boolean` 当为 `true` 时，主题命令将被添加到组中。
`title`		`string`
`description`		`string`
`叠加层`	`true`	`boolean` 在模态框后面渲染一个叠加层。
`过渡动画`	`true`	`boolean` 在打开或关闭时为模态框添加动画效果。
`内容`		`DialogContentProps & Partial<EmitsToProps<DialogContentImplEmits>>` 模态框的内容。
`可关闭的`	`true`	`boolean` 当为 `false` 时，点击外部或按下 Escape 键时模态框将不会关闭。
`全屏`	`false`	`boolean` 当为 `true` 时，模态框将占据整个屏幕。
`modal`		`boolean` 对话框的模态性。当设置为 `true` 时，与外部元素的交互将被禁用，并且只有对话框内容对屏幕阅读器可见。
`portal`	`true`	`string \| false \| true \| HTMLElement` 在传送门中渲染模态框。
`搜索词`	`''`	`string`
`ui`		{ modal?: ClassNameValue; input?: ClassNameValue; } & { root?: ClassNameValue; input?: ClassNameValue; close?: ClassNameValue; back?: ClassNameValue; content?: ClassNameValue; footer?: ClassNameValue; viewport?: ClassNameValue; group?: ClassNameValue; empty?: ClassNameValue; label?: ClassNameValue; item?: ClassNameValue; itemLeadingIcon?: ClassNameValue; itemLeadingAvatar?: ClassNameValue; itemLeadingAvatarSize?: ClassNameValue; itemLeadingChip?: ClassNameValue; itemLeadingChipSize?: ClassNameValue; itemTrailing?: ClassNameValue; itemTrailingIcon?: ClassNameValue; itemTrailingHighlightedIcon?: ClassNameValue; itemTrailingKbds?: ClassNameValue; itemTrailingKbdsSize?: ClassNameValue; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; itemLabelBase?: ClassNameValue; itemLabelPrefix?: ClassNameValue; itemLabelSuffix?: ClassNameValue; }

插槽

插槽	类型
`空`	`{ searchTerm?: string \| undefined; }`
`页脚`	{ ui: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; back: (props?: Record<string, any> \| undefined) => string; content: (props?: Record<string, any> \| undefined) => string; footer: (props?: Record<string, any> \| undefined) => string; viewport: (props?: Record<string, any> \| undefined) => string; group: (props?: Record<string, any> \| undefined) => string; empty: (props?: Record<string, any> \| undefined) => string; label: (props?: Record<string, any> \| undefined) => string; item: (props?: Record<string, any> \| undefined) => string; itemLeadingIcon: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatar: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> \| undefined) => string; itemLeadingChip: (props?: Record<string, any> \| undefined) => string; itemLeadingChipSize: (props?: Record<string, any> \| undefined) => string; itemTrailing: (props?: Record<string, any> \| undefined) => string; itemTrailingIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingKbds: (props?: Record<string, any> \| undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> \| undefined) => string; itemWrapper: (props?: Record<string, any> \| undefined) => string; itemLabel: (props?: Record<string, any> \| undefined) => string; itemDescription: (props?: Record<string, any> \| undefined) => string; itemLabelBase: (props?: Record<string, any> \| undefined) => string; itemLabelPrefix: (props?: Record<string, any> \| undefined) => string; itemLabelSuffix: (props?: Record<string, any> \| undefined) => string; }; }
`返回`	{ ui: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; back: (props?: Record<string, any> \| undefined) => string; content: (props?: Record<string, any> \| undefined) => string; footer: (props?: Record<string, any> \| undefined) => string; viewport: (props?: Record<string, any> \| undefined) => string; group: (props?: Record<string, any> \| undefined) => string; empty: (props?: Record<string, any> \| undefined) => string; label: (props?: Record<string, any> \| undefined) => string; item: (props?: Record<string, any> \| undefined) => string; itemLeadingIcon: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatar: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> \| undefined) => string; itemLeadingChip: (props?: Record<string, any> \| undefined) => string; itemLeadingChipSize: (props?: Record<string, any> \| undefined) => string; itemTrailing: (props?: Record<string, any> \| undefined) => string; itemTrailingIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingKbds: (props?: Record<string, any> \| undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> \| undefined) => string; itemWrapper: (props?: Record<string, any> \| undefined) => string; itemLabel: (props?: Record<string, any> \| undefined) => string; itemDescription: (props?: Record<string, any> \| undefined) => string; itemLabelBase: (props?: Record<string, any> \| undefined) => string; itemLabelPrefix: (props?: Record<string, any> \| undefined) => string; itemLabelSuffix: (props?: Record<string, any> \| undefined) => string; }; }
`close`	{ ui: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; back: (props?: Record<string, any> \| undefined) => string; content: (props?: Record<string, any> \| undefined) => string; footer: (props?: Record<string, any> \| undefined) => string; viewport: (props?: Record<string, any> \| undefined) => string; group: (props?: Record<string, any> \| undefined) => string; empty: (props?: Record<string, any> \| undefined) => string; label: (props?: Record<string, any> \| undefined) => string; item: (props?: Record<string, any> \| undefined) => string; itemLeadingIcon: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatar: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> \| undefined) => string; itemLeadingChip: (props?: Record<string, any> \| undefined) => string; itemLeadingChipSize: (props?: Record<string, any> \| undefined) => string; itemTrailing: (props?: Record<string, any> \| undefined) => string; itemTrailingIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingKbds: (props?: Record<string, any> \| undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> \| undefined) => string; itemWrapper: (props?: Record<string, any> \| undefined) => string; itemLabel: (props?: Record<string, any> \| undefined) => string; itemDescription: (props?: Record<string, any> \| undefined) => string; itemLabelBase: (props?: Record<string, any> \| undefined) => string; itemLabelPrefix: (props?: Record<string, any> \| undefined) => string; itemLabelSuffix: (props?: Record<string, any> \| undefined) => string; }; }
`item`	{ item: ContentSearchItem; index: number; ui: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; back: (props?: Record<string, any> \| undefined) => string; content: (props?: Record<string, any> \| undefined) => string; footer: (props?: Record<string, any> \| undefined) => string; viewport: (props?: Record<string, any> \| undefined) => string; group: (props?: Record<string, any> \| undefined) => string; empty: (props?: Record<string, any> \| undefined) => string; label: (props?: Record<string, any> \| undefined) => string; item: (props?: Record<string, any> \| undefined) => string; itemLeadingIcon: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatar: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> \| undefined) => string; itemLeadingChip: (props?: Record<string, any> \| undefined) => string; itemLeadingChipSize: (props?: Record<string, any> \| undefined) => string; itemTrailing: (props?: Record<string, any> \| undefined) => string; itemTrailingIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingKbds: (props?: Record<string, any> \| undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> \| undefined) => string; itemWrapper: (props?: Record<string, any> \| undefined) => string; itemLabel: (props?: Record<string, any> \| undefined) => string; itemDescription: (props?: Record<string, any> \| undefined) => string; itemLabelBase: (props?: Record<string, any> \| undefined) => string; itemLabelPrefix: (props?: Record<string, any> \| undefined) => string; itemLabelSuffix: (props?: Record<string, any> \| undefined) => string; }; }
`item-leading`	{ item: ContentSearchItem; index: number; ui: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; back: (props?: Record<string, any> \| undefined) => string; content: (props?: Record<string, any> \| undefined) => string; footer: (props?: Record<string, any> \| undefined) => string; viewport: (props?: Record<string, any> \| undefined) => string; group: (props?: Record<string, any> \| undefined) => string; empty: (props?: Record<string, any> \| undefined) => string; label: (props?: Record<string, any> \| undefined) => string; item: (props?: Record<string, any> \| undefined) => string; itemLeadingIcon: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatar: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> \| undefined) => string; itemLeadingChip: (props?: Record<string, any> \| undefined) => string; itemLeadingChipSize: (props?: Record<string, any> \| undefined) => string; itemTrailing: (props?: Record<string, any> \| undefined) => string; itemTrailingIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingKbds: (props?: Record<string, any> \| undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> \| undefined) => string; itemWrapper: (props?: Record<string, any> \| undefined) => string; itemLabel: (props?: Record<string, any> \| undefined) => string; itemDescription: (props?: Record<string, any> \| undefined) => string; itemLabelBase: (props?: Record<string, any> \| undefined) => string; itemLabelPrefix: (props?: Record<string, any> \| undefined) => string; itemLabelSuffix: (props?: Record<string, any> \| undefined) => string; }; }
`item-label`	{ item: ContentSearchItem; index: number; ui: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; back: (props?: Record<string, any> \| undefined) => string; content: (props?: Record<string, any> \| undefined) => string; footer: (props?: Record<string, any> \| undefined) => string; viewport: (props?: Record<string, any> \| undefined) => string; group: (props?: Record<string, any> \| undefined) => string; empty: (props?: Record<string, any> \| undefined) => string; label: (props?: Record<string, any> \| undefined) => string; item: (props?: Record<string, any> \| undefined) => string; itemLeadingIcon: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatar: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> \| undefined) => string; itemLeadingChip: (props?: Record<string, any> \| undefined) => string; itemLeadingChipSize: (props?: Record<string, any> \| undefined) => string; itemTrailing: (props?: Record<string, any> \| undefined) => string; itemTrailingIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingKbds: (props?: Record<string, any> \| undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> \| undefined) => string; itemWrapper: (props?: Record<string, any> \| undefined) => string; itemLabel: (props?: Record<string, any> \| undefined) => string; itemDescription: (props?: Record<string, any> \| undefined) => string; itemLabelBase: (props?: Record<string, any> \| undefined) => string; itemLabelPrefix: (props?: Record<string, any> \| undefined) => string; itemLabelSuffix: (props?: Record<string, any> \| undefined) => string; }; }
`项目描述`	{ item: ContentSearchItem; index: number; ui: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; back: (props?: Record<string, any> \| undefined) => string; content: (props?: Record<string, any> \| undefined) => string; footer: (props?: Record<string, any> \| undefined) => string; viewport: (props?: Record<string, any> \| undefined) => string; group: (props?: Record<string, any> \| undefined) => string; empty: (props?: Record<string, any> \| undefined) => string; label: (props?: Record<string, any> \| undefined) => string; item: (props?: Record<string, any> \| undefined) => string; itemLeadingIcon: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatar: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> \| undefined) => string; itemLeadingChip: (props?: Record<string, any> \| undefined) => string; itemLeadingChipSize: (props?: Record<string, any> \| undefined) => string; itemTrailing: (props?: Record<string, any> \| undefined) => string; itemTrailingIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingKbds: (props?: Record<string, any> \| undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> \| undefined) => string; itemWrapper: (props?: Record<string, any> \| undefined) => string; itemLabel: (props?: Record<string, any> \| undefined) => string; itemDescription: (props?: Record<string, any> \| undefined) => string; itemLabelBase: (props?: Record<string, any> \| undefined) => string; itemLabelPrefix: (props?: Record<string, any> \| undefined) => string; itemLabelSuffix: (props?: Record<string, any> \| undefined) => string; }; }
`item-trailing`	{ item: ContentSearchItem; index: number; ui: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; back: (props?: Record<string, any> \| undefined) => string; content: (props?: Record<string, any> \| undefined) => string; footer: (props?: Record<string, any> \| undefined) => string; viewport: (props?: Record<string, any> \| undefined) => string; group: (props?: Record<string, any> \| undefined) => string; empty: (props?: Record<string, any> \| undefined) => string; label: (props?: Record<string, any> \| undefined) => string; item: (props?: Record<string, any> \| undefined) => string; itemLeadingIcon: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatar: (props?: Record<string, any> \| undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> \| undefined) => string; itemLeadingChip: (props?: Record<string, any> \| undefined) => string; itemLeadingChipSize: (props?: Record<string, any> \| undefined) => string; itemTrailing: (props?: Record<string, any> \| undefined) => string; itemTrailingIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> \| undefined) => string; itemTrailingKbds: (props?: Record<string, any> \| undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> \| undefined) => string; itemWrapper: (props?: Record<string, any> \| undefined) => string; itemLabel: (props?: Record<string, any> \| undefined) => string; itemDescription: (props?: Record<string, any> \| undefined) => string; itemLabelBase: (props?: Record<string, any> \| undefined) => string; itemLabelPrefix: (props?: Record<string, any> \| undefined) => string; itemLabelSuffix: (props?: Record<string, any> \| undefined) => string; }; }
`内容`	`{ close: () => void; }`

事件

事件	类型
`update:searchTerm`	`[value: string]`

可访问属性

通过模板引用访问组件时，您可以使用以下内容：

名称	类型
`commandPaletteRef`	`Ref<InstanceType<typeof UCommandPalette> \| null>`

主题

app.config.ts

export default defineAppConfig({
  ui: {
    contentSearch: {
      slots: {
        modal: '',
        input: ''
      },
      variants: {
        fullscreen: {
          false: {
            modal: 'sm:max-w-3xl h-full sm:h-[28rem]'
          }
        },
        size: {
          xs: {},
          sm: {},
          md: {},
          lg: {},
          xl: {}
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        contentSearch: {
          slots: {
            modal: '',
            input: ''
          },
          variants: {
            fullscreen: {
              false: {
                modal: 'sm:max-w-3xl h-full sm:h-[28rem]'
              }
            },
            size: {
              xs: {},
              sm: {},
              md: {},
              lg: {},
              xl: {}
            }
          },
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})

更新日志

v4.5.0昨天

8f5f4— fix(components): 添加 fixed 属性以防止响应式文本尺寸减小 (#6074)
c9704— feat(Theme): 新组件 (#4387)

v4.4.0上个月

3ae04— feat(CommandPalette): 添加 size 属性 (#5878)

v4.3.02 个月前

184ea— chore(components): 通过省略操作按钮的链接属性来减少类型的冗余
70317— 修复 (ContentSearch/DasboardSearch): 设置移动端全高以防止跳转

v4.2.03 个月前

dd81d— feat(components): 添加 data-slot 属性 (#5447)
e751b— 修复 (CommandPalette/ContentSearch): 改进性能和过滤逻辑 (#5433)
fce2d— fix(components)!: 统一暴露的 refs (#5385)

v4.1.04 个月前

8a259— 修复 (ContentSearch): 去重描述和后缀
63c0a— feat(components): 在使用的插槽属性中暴露 ui (#5207)

v4.0.15 个月前

095a0— 修复 (ContentSearch/DashboardSearch): 代理模态框属性以支持全屏

v3.3.45 个月前

3173b— fix(components): proxySlots 响应性 (#4969)

v3.3.36 个月前

61b60— feat(Icon): 允许传递组件而非名称 (#4766)

v3.3.16 个月前

946c2— 修复 (ContentSearch/DashboardSearch): 使 ui.modal 生效
5cb65— feat: 导入 @nuxt/ui-pro 组件 (#4675)

ContentNavigation

一个手风琴式导航组件，用于组织页面链接。

ContentSearchButton

一个预设样式的按钮，用于打开 ContentSearch 模态框。