ContentSearchPRO
用法
ContentSearch 组件扩展了 CommandPalette 组件,因此您可以传递任何属性,例如 icon
、placeholder
等。
使用 files
和 navigation
属性,以及您使用 @nuxt/content
中的 queryCollectionSearchSections
和 queryCollectionNavigation
可组合项获取的 files
和 navigation
值。
useContentSearch
可组合项来打开 CommandPalette:const { open } = useContentSearch()
。快捷键
使用 shortcut
属性可更改在 defineShortcuts 中用于打开 ContentSearch 组件的快捷键。默认为 meta_k
( K)。
<template>
<UApp>
<ClientOnly>
<LazyUContentSearch
v-model:search-term="searchTerm"
shortcut="meta_k"
:files="files"
:navigation="navigation"
:fuse="{ resultLimit: 42 }"
/>
</ClientOnly>
</UApp>
</template>
颜色模式
默认情况下,一组命令将被添加到命令面板中,以便您可以在亮模式和暗模式之间切换。这仅在未通过 definePageMeta
在特定页面中强制设置 colorMode
时生效。
<script setup lang="ts">
definePageMeta({
colorMode: 'dark'
})
</script>
您可以通过将 color-mode
属性设置为 false
来禁用此行为。
<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 组件。
<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
属性
属性 | 默认值 | 类型 |
---|---|---|
图标 |
|
输入框中显示的图标。 |
占位符 |
|
输入框的占位文本。 |
自动聚焦 |
|
组件挂载时自动聚焦输入框。 |
加载中 |
当为 | |
加载图标 |
|
当 |
关闭 |
|
在输入框中显示关闭按钮(例如在模态框内时很有用)。 |
关闭图标 |
|
关闭按钮中显示的图标。 |
快捷键 |
|
打开搜索的键盘快捷键(由 |
链接 |
在命令面板中显示为第一组的链接组。
| |
导航 |
| |
分组 |
在导航和颜色模式分组之间显示的自定义分组。 | |
文件 |
| |
fuse |
|
用于 `useFuse` 的选项useFuse传递给CommandPalette. |
颜色模式 |
|
当为 |
描述 |
| |
标题 |
| |
内容 |
模态框的内容。
| |
过渡动画 |
|
在打开或关闭时为模态框添加动画效果。 |
叠加层 |
|
在模态框后面渲染一个叠加层。 |
可关闭的 |
|
当为 |
全屏 |
|
当为 |
模态 |
对话框的模态性。当设置为 | |
传送门 |
|
在传送门中渲染模态框。 |
搜索词 |
| |
ui |
|
插槽
插槽 | 类型 |
---|---|
空 |
|
页脚 |
|
返回 |
|
关闭 |
|
项 |
|
项-前缀 |
|
项-标签 |
|
项-后缀 |
|
内容 |
|
事件
事件 | 类型 |
---|---|
update:searchTerm |
|
主题
export default defineAppConfig({
uiPro: {
contentSearch: {
slots: {
modal: 'sm:max-w-3xl sm:h-[28rem]',
input: '[&>input]:text-base/5'
}
}
}
})
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'
}
}
}
})
]
})
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'
}
}
}
})
]
})