DashboardSearch 组件继承了 CommandPalette 组件，因此您可以传入任何属性，例如 icon、placeholder 等。
在 DashboardGroup 组件的默认插槽中使用它
<template>
<UDashboardGroup>
<UDashboardSidebar>
<UDashboardSearchButton />
</UDashboardSidebar>
<UDashboardSearch />
<slot />
</UDashboardGroup>
</template>
v-model:open 指令来打开 CommandPalette。使用 shortcut 属性更改在 defineShortcuts 中用于打开 ContentSearch 组件的快捷键。默认为 meta_k ( K)。
<template>
<UDashboardSearch
v-model:search-term="searchTerm"
shortcut="meta_k"
:groups="groups"
:fuse="{ resultLimit: 42 }"
/>
</template>
默认情况下，一组命令将被添加到命令面板中，以便您可以在浅色和深色模式之间切换。这仅在 colorMode 未在特定页面中强制执行时生效，这可以通过 definePageMeta 实现
<script setup lang="ts">
definePageMeta({
colorMode: 'dark'
})
</script>
您可以通过将 color-mode 属性设置为 false 来禁用此行为
<template>
<UDashboardSearch
v-model:search-term="searchTerm"
:color-mode="false"
:groups="groups"
:fuse="{ resultLimit: 42 }"
/>
</template>
| 属性 | 默认值 | 类型 |
|---|---|---|
图标 | appConfig.ui.icons.search | any输入框中显示的图标。 |
placeholder | t('commandPalette.placeholder') | string输入框的占位文本。 |
autofocus | true | boolean组件挂载时自动聚焦输入框。 |
loading | boolean当为 | |
loadingIcon | appConfig.ui.icons.loading | any当 |
close | true | boolean | Omit<ButtonProps, LinkPropsKeys>在输入框中显示一个关闭按钮（例如，当在模态框内时很有用）。 |
closeIcon | appConfig.ui.icons.close | any关闭按钮中显示的图标。 |
快捷键 | 'meta_k' | string打开搜索的键盘快捷键（由 |
分组 | CommandPaletteGroup<CommandPaletteItem>[] | |
fuse | {} | UseFuseOptions<CommandPaletteItem>用于 `useFuse` 的选项useFuse传递给CommandPalette. |
colorMode | true | boolean当 |
title | string | |
description | string | |
叠加层 | true | boolean在模态框后面渲染一个叠加层。 |
过渡动画 | true | boolean在打开或关闭时为模态框添加动画效果。 |
内容 | DialogContentProps & Partial<EmitsToProps<DialogContentImplEmits>>模态框的内容。
| |
可关闭的 | true | boolean当为 |
全屏 | false | boolean当为 |
modal | boolean对话框的模态性。当设置为 | |
portal | true | string | false | true | HTMLElement在传送门中渲染模态框。 |
open | false | boolean |
搜索词 | '' | 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: object; } |
返回 | { ui: object; } |
close | { ui: object; } |
item | { item: CommandPaletteItem; index: number; ui: object; } |
item-leading | { item: CommandPaletteItem; index: number; ui: object; } |
item-label | { item: CommandPaletteItem; index: number; ui: object; } |
项目描述 | { item: CommandPaletteItem; index: number; ui: object; } |
item-trailing | { item: CommandPaletteItem; index: number; ui: object; } |
内容 | { close: () => void; } |
| 事件 | 类型 |
|---|---|
update:open | [value: boolean] |
update:searchTerm | [value: string] |
通过模板引用访问组件时，您可以使用以下内容：
| 名称 | 类型 |
|---|---|
commandPaletteRef | Ref<InstanceType<typeof UCommandPalette> | null> |
export default defineAppConfig({
ui: {
dashboardSearch: {
slots: {
modal: '',
input: '[&>input]:text-base/5'
},
variants: {
fullscreen: {
false: {
modal: 'sm:max-w-3xl h-full sm:h-[28rem]'
}
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
dashboardSearch: {
slots: {
modal: '',
input: '[&>input]:text-base/5'
},
variants: {
fullscreen: {
false: {
modal: 'sm:max-w-3xl h-full sm:h-[28rem]'
}
}
}
}
}
})
]
})