DashboardSearchPRO
用法
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>
颜色模式
默认情况下,会向命令面板添加一组命令,以便您可以在亮色模式和暗色模式之间切换。这仅在特定页面中未通过 definePageMeta
强制指定 colorMode
时生效。
<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>
API
属性
属性 | 默认值 | 类型 |
---|---|---|
colorMode |
|
|
shortcut |
|
|
icon |
|
搜索输入框中显示的图标。 |
open |
| |
loading |
当 | |
loadingIcon |
|
当 |
searchTerm |
| |
placeholder |
命令面板搜索输入框的占位文本。 | |
groups |
| |
fuse |
|
选项,用于useFuse传递给CommandPalette. |
ui |
|
插槽
插槽 | 类型 |
---|---|
empty |
|
close |
|
item |
|
item-leading |
|
item-label |
|
item-trailing |
|
content |
|
事件
事件 | 类型 |
---|---|
update:open |
|
update:searchTerm |
|
主题
export default defineAppConfig({
uiPro: {
dashboardSearch: {
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: {
dashboardSearch: {
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: {
dashboardSearch: {
slots: {
modal: 'sm:max-w-3xl sm:h-[28rem]',
input: '[&>input]:text-base/5'
}
}
}
})
]
})