ContentSearchPRO

一个随时可用的命令面板,可添加到您的文档中。
此组件仅在安装了 @nuxt/content 模块后可用。

用法

ContentSearch 组件扩展了 CommandPalette 组件,因此您可以传递任何属性,例如 iconplaceholder 等。

使用 filesnavigation 属性,以及您使用 @nuxt/content 中的 queryCollectionSearchSectionsqueryCollectionNavigation 可组合项获取的 filesnavigation 值。

您可以通过按下 K 键、使用 ContentSearchButton 组件或使用 useContentSearch 可组合项来打开 CommandPalette: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>

颜色模式

默认情况下,一组命令将被添加到命令面板中,以便您可以在亮模式和暗模式之间切换。这仅在未通过 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

属性

属性默认值类型
图标

appConfig.ui.icons.search

字符串

输入框中显示的图标。

占位符

t('commandPalette.placeholder')

字符串

输入框的占位文本。

自动聚焦

true

布尔值

组件挂载时自动聚焦输入框。

加载中

布尔值

当为 true 时,将显示加载图标。

加载图标

appConfig.ui.icons.loading

字符串

loading 属性为 true 时显示的图标。

关闭

true

boolean | Partial<ButtonProps>

在输入框中显示关闭按钮(例如在模态框内时很有用)。{ size: 'md', color: 'neutral', variant: 'ghost' }

关闭图标

appConfig.ui.icons.close

字符串

关闭按钮中显示的图标。

快捷键

'meta_k'

字符串

打开搜索的键盘快捷键(由defineShortcuts)

链接

ContentSearchLink[]

在命令面板中显示为第一组的链接组。

导航

ContentNavigationItem[]

分组

CommandPaletteGroup<ContentSearchItem>[]

在导航和颜色模式分组之间显示的自定义分组。

文件

ContentSearchFile[]

fuse

{ fuseOptions: { includeMatches: true } }

UseFuseOptions<ContentSearchLink>

用于 `useFuse` 的选项useFuse传递给CommandPalette.

颜色模式

true

布尔值

当为 true 时,主题命令将被添加到分组中。

描述

字符串

标题

字符串

内容

DialogContentProps & Partial<EmitsToProps<DialogContentImplEmits>>

模态框的内容。

过渡动画

true

布尔值

在打开或关闭时为模态框添加动画效果。

叠加层

true

布尔值

在模态框后面渲染一个叠加层。

可关闭的

true

布尔值

当为 false 时,点击外部或按下 Escape 键时模态框将不会关闭。

全屏

false

布尔值

当为 true 时,模态框将占据整个屏幕。

模态

布尔值

对话框的模态性。当设置为 true 时,
与外部元素的交互将被禁用,并且只有对话框内容对屏幕阅读器可见。

传送门

true

string | false | true | HTMLElement

在传送门中渲染模态框。

搜索词

字符串

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; itemLabel?: ClassNameValue; itemLabelBase?: ClassNameValue; itemLabelPrefix?: ClassNameValue; itemLabelSuffix?: ClassNameValue; }

插槽

插槽类型

{ searchTerm?: string | undefined; }

页脚

{ ui: {}; }

返回

{ ui: {}; }

关闭

{ ui: {}; }

{ item: ContentSearchItem; index: number; }

项-前缀

{ item: ContentSearchItem; index: number; }

项-标签

{ item: ContentSearchItem; index: number; }

项-后缀

{ item: ContentSearchItem; index: number; }

内容

{}

事件

事件类型
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'
          }
        }
      }
    })
  ]
})