DashboardSearch^PRO

一个即用型的 CommandPalette，可添加到您的仪表板。

用法

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

在 DashboardGroup 组件的默认插槽中使用它，并确保在 DashboardSidebarButton 之前注册它

layouts/dashboard.vue

<template>
  <UDashboardGroup>
    <UDashboardSearch />

    <UDashboardSidebar>
      <UDashboardSearchButton />
    </UDashboardSidebar>

    <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

Props

Prop	默认值	类型
`icon`	`appConfig.ui.icons.search`	`字符串` 搜索输入框中显示的图标。
`placeholder`	`'输入命令或搜索...'`	`字符串` 搜索输入框的占位符。
`loading`		`布尔值` 当 `true` 时，将显示加载图标。
`loadingIcon`	`appConfig.ui.icons.loading`	`字符串` 当 `loading` prop 为 `true` 时的图标。
`shortcut`	`'meta_k'`	`字符串` 打开搜索的键盘快捷键（由`defineShortcuts`)
`groups`		`CommandPaletteGroup<CommandPaletteItem>[]`
`fuse`	`{}`	`UseFuseOptions<CommandPaletteItem>` 的选项useFuse传递给CommandPalette.
`colorMode`	`true`	`布尔值` 当 `true` 时，主题命令将被添加到 groups 中。
`open`	`false`	`布尔值`
`searchTerm`	`''`	`字符串`
`ui`		`Partial<{ modal: string; }>`

插槽

插槽	类型
`empty`	`{ searchTerm?: string \| undefined; }`
`close`	`{ ui: any; }`
`item`	`{ item: CommandPaletteItem; index: number; }`
`item-leading`	`{ item: CommandPaletteItem; index: number; }`
`item-label`	`{ item: CommandPaletteItem; index: number; }`
`item-trailing`	`{ item: CommandPaletteItem; index: number; }`

发射

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

主题

app.config.ts

export default defineAppConfig({
  uiPro: {
    dashboardSearch: {
      slots: {
        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({
      uiPro: {
        dashboardSearch: {
          slots: {
            modal: 'sm:max-w-3xl sm:h-[28rem]'
          }
        }
      }
    })
  ]
})

vite.config.ts

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]'
          }
        }
      }
    })
  ]
})

DashboardResizeHandle

用于调整侧边栏或面板大小的句柄。

DashboardSearchButton

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

DashboardSearchPRO

DashboardSearch^PRO