ContentSearch^PRO

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

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

用法

ContentSearch 组件扩展了命令面板组件，因此您可以传递任何属性，例如 icon、placeholder 等。

使用通过 @nuxt/content 的 queryCollectionSearchSections 和 queryCollectionNavigation 可组合函数获取的 files 和 navigation 值，配合 files 和 navigation 属性。

您可以通过按下 K 键、使用 ContentSearchButton 组件或使用 useContentSearch 可组合函数来打开命令面板：const { open } = useContentSearch()。

快捷键

使用 shortcut 属性来更改用于打开 ContentSearch 组件的 defineShortcuts 快捷键。默认为 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>

颜色模式

默认情况下，一组命令将被添加到命令面板中，以便您可以在浅色和深色模式之间切换。这仅在特定页面中没有通过 definePageMeta 强制设置 colorMode 时生效

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: '/getting-started'
}, {
  label: 'Components',
  icon: 'i-lucide-box',
  to: '/components'
}, {
  label: 'Roadmap',
  icon: 'i-lucide-chart-no-axes-gantt',
  to: '/roadmap'
}]

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

属性

属性	默认值	类型
`searchTerm`		`string`
`icon`	`appConfig.ui.icons.search`	`string` 在搜索输入框中显示的图标。
`placeholder`		`string` 命令面板搜索输入框的占位符。
`loading`		`boolean` 当为 `true` 时，将显示加载图标。
`loadingIcon`	`appConfig.ui.icons.loading`	`string` 当 `loading` 属性为 `true` 时显示的图标。
`shortcut`	`'meta_k'`	`string` 打开搜索的键盘快捷键（由`defineShortcuts`)
`links`		`ContentSearchLink[]` 在命令面板中显示为第一个分组的链接分组。
`navigation`		`ContentNavigationItem[]`
`groups`		`CommandPaletteGroup<ContentSearchItem>[]` 显示在导航和颜色模式分组之间的自定义分组。
`files`		`ContentSearchFile[]`
`fuse`	`{ fuseOptions: { includeMatches: true } }`	`UseFuseOptions<ContentSearchLink>` 传递给useFuse的选项命令面板.
`colorMode`	`true`	`boolean` 当为 `true` 时，主题命令将添加到分组中。
`ui`		`{ modal?: ClassNameValue; input?: ClassNameValue; } & { root?: ClassNameValue; input?: ClassNameValue; close?: ClassNameValue; ... 19 more ...; itemLabelSuffix?: ClassNameValue; }`

插槽

插槽名称	类型
`empty`	`{ searchTerm?: string \| undefined; }`
`close`	`{ ui: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; ... 19 more ...; itemLabelSuffix: (props?: Record<...> \| undefined) => string; }; }`
`item`	`{ item: ContentSearchItem; index: number; }`
`item-leading`	`{ item: ContentSearchItem; index: number; }`
`item-label`	`{ item: ContentSearchItem; index: number; }`
`item-trailing`	`{ item: ContentSearchItem; index: number; }`
`content`	`{}`

事件

事件名称	类型
`update:searchTerm`	`string`

主题

app.config.ts

export default defineAppConfig({
  uiPro: {
    contentSearch: {
      slots: {
        modal: 'sm:max-w-3xl sm:h-[28rem]',
        input: '[&>input]:text-base/5'
      }
    }
  }
})

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({
      uiPro: {
        contentSearch: {
          slots: {
            modal: 'sm:max-w-3xl sm:h-[28rem]',
            input: '[&>input]:text-base/5'
          }
        }
      }
    })
  ]
})

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        contentSearch: {
          slots: {
            modal: 'sm:max-w-3xl sm:h-[28rem]',
            input: '[&>input]:text-base/5'
          }
        }
      }
    })
  ]
})

ContentNavigation

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

ContentSearchButton

一个预设样式的按钮，用于打开内容搜索模态框。

ContentSearchPRO

ContentSearch^PRO