DashboardSearchPRO
用法
DashboardSearch 组件扩展了 CommandPalette 组件,因此您可以传递任何属性,例如 icon
、placeholder
等。
将其用于 DashboardGroup 组件的默认插槽内。
<template>
<UDashboardGroup>
<UDashboardSidebar>
<UDashboardSearchButton />
</UDashboardSidebar>
<UDashboardSearch />
<slot />
</UDashboardGroup>
</template>
v-model:open
指令来打开 CommandPalette。快捷键
使用 shortcut
prop 来更改 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
prop 设置为 false
来禁用此行为。
<template>
<UDashboardSearch
v-model:search-term="searchTerm"
:color-mode="false"
:groups="groups"
:fuse="{ resultLimit: 42 }"
/>
</template>
API
属性
属性 | 默认值 | 类型 |
---|---|---|
图标 |
|
输入框中显示的图标。 |
placeholder |
|
输入框的占位文本。 |
autofocus |
|
组件挂载时自动聚焦输入框。 |
loading |
当为 | |
loadingIcon |
|
当 |
close |
|
在输入框中显示关闭按钮(例如在模态框中使用时很有用)。 |
closeIcon |
|
关闭按钮中显示的图标。 |
shortcut |
|
用于打开搜索的键盘快捷键(由 |
分组 |
| |
fuse |
|
用于 `useFuse` 的选项useFuse传递给CommandPalette. |
colorMode |
|
当 |
description |
| |
title |
| |
内容 |
模态框的内容。
| |
过渡动画 |
|
在打开或关闭时为模态框添加动画效果。 |
叠加层 |
|
在模态框后面渲染一个叠加层。 |
可关闭的 |
|
当为 |
全屏 |
|
当为 |
modal |
对话框的模态性。当设置为 | |
portal |
|
在传送门中渲染模态框。 |
open |
| |
搜索词 |
| |
ui |
|
插槽
插槽 | 类型 |
---|---|
空 |
|
页脚 |
|
返回 |
|
close |
|
item |
|
item-leading |
|
item-label |
|
item-trailing |
|
内容 |
|
事件
事件 | 类型 |
---|---|
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'
}
}
}
})
]
})