仪表盘搜索

一个随时可用的命令面板，可添加到您的仪表盘中。

用法

DashboardSearch 组件扩展了 CommandPalette 组件，因此您可以传入任何属性，例如 icon、placeholder 等。

在 DashboardGroup 组件的默认插槽中使用它。

layouts/dashboard.vue

<template>
  <UDashboardGroup>
    <UDashboardSidebar>
      <UDashboardSearchButton />
    </UDashboardSidebar>

    <UDashboardSearch />

    <slot />
  </UDashboardGroup>
</template>

您可以通过按 K，或使用 DashboardSearchButton 组件，或使用 v-model:open 指令来打开 CommandPalette。

快捷键

使用 shortcut prop 更改 defineShortcuts 中用于打开 ContentSearch 组件的快捷键。默认为 meta_k ( K)。

app.vue

<template>
  <UDashboardSearch
    v-model:search-term="searchTerm"
    shortcut="meta_k"
    :groups="groups"
    :fuse="{ resultLimit: 42 }"
  />
</template>

颜色模式

默认情况下，一组命令将被添加到命令面板中，以便您可以在浅色模式和深色模式之间切换。这只有在特定页面中未强制使用 colorMode 的情况下才会生效，这可以通过 definePageMeta 实现

pages/index.vue

<script setup lang="ts">
definePageMeta({
  colorMode: 'dark'
})
</script>

您可以通过将 color-mode prop 设置为 false 来禁用此行为

app.vue

<template>
  <UDashboardSearch
    v-model:search-term="searchTerm"
    :color-mode="false"
    :groups="groups"
    :fuse="{ resultLimit: 42 }"
  />
</template>

API

属性

属性	默认值	类型
`图标`	`appConfig.ui.icons.search`	`字符串 \| 对象` 输入框中显示的图标。
`placeholder`	`t('commandPalette.placeholder')`	`string` 输入框的占位文本。
`autofocus`	`true`	`boolean` 组件挂载时自动聚焦输入框。
`loading`		`boolean` 当为 `true` 时，将显示加载图标。
`loadingIcon`	`appConfig.ui.icons.loading`	`字符串 \| 对象` 当 `loading` prop 为 `true` 时显示的图标。
`close`	`true`	`布尔值 \| 部分<ButtonProps>` 在输入框中显示关闭按钮（例如，在模态框中很有用）。`{ size: 'md', color: 'neutral', variant: 'ghost' }`
`closeIcon`	`appConfig.ui.icons.close`	`字符串 \| 对象` 关闭按钮中显示的图标。
`快捷方式`	`'meta_k'`	`string` 打开搜索的键盘快捷键（由`defineShortcuts`)
`分组`		`CommandPaletteGroup<CommandPaletteItem>[]`
`fuse`	`{}`	`UseFuseOptions<CommandPaletteItem>` 用于 `useFuse` 的选项useFuse传递给CommandPalette.
`colorMode`	`true`	`boolean` 当为 `true` 时，主题命令将被添加到组中。
`title`		`string`
`description`		`string`
`叠加层`	`true`	`boolean` 在模态框后面渲染一个叠加层。
`过渡动画`	`true`	`boolean` 在打开或关闭时为模态框添加动画效果。
`内容`		`DialogContentProps & Partial<EmitsToProps<DialogContentImplEmits>>` 模态框的内容。
`可关闭的`	`true`	`boolean` 当为 `false` 时，点击外部或按下 Escape 键时模态框将不会关闭。
`全屏`	`false`	`boolean` 当为 `true` 时，模态框将占据整个屏幕。
`modal`		`boolean` 对话框的模态性。当设置为 `true` 时，与外部元素的交互将被禁用，并且只有对话框内容对屏幕阅读器可见。
`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-leading`
`item-label`
`项目描述`
`item-trailing`	`{ item: CommandPaletteItem; index: number; ui: object; }`
`内容`	`{ close: () => void; }`

事件

事件	类型
`update:open`	`[value: boolean]`
`update:searchTerm`	`[value: string]`

主题

app.config.ts

export default defineAppConfig({
  ui: {
    dashboardSearch: {
      slots: {
        modal: '',
        input: '[&>input]:text-base/5'
      },
      variants: {
        fullscreen: {
          false: {
            modal: 'sm:max-w-3xl sm:h-[28rem]'
          }
        }
      }
    }
  }
})

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({
      ui: {
        dashboardSearch: {
          slots: {
            modal: '',
            input: '[&>input]:text-base/5'
          },
          variants: {
            fullscreen: {
              false: {
                modal: 'sm:max-w-3xl sm:h-[28rem]'
              }
            }
          }
        }
      }
    })
  ]
})

更新日志

63c0a— feat: 在使用的 slot prop 中暴露 ui (#5207)

095a0— 修复：代理模态框属性以支持全屏

3173b— fix: proxySlots 响应性 (#4969)

61b60— 功能：允许传递组件而不是名称 (#4766)

946c2— 修复：使 ui.modal 生效

5cb65— 特性：导入 @nuxt/ui-pro 组件

DashboardResizeHandle

用于调整侧边栏或面板大小的拖动把手。

DashboardSearchButton

一个预设样式的按钮，用于打开 DashboardSearch 模态框。