DashboardSearchPRO

一个随时可用的 CommandPalette,可添加到您的仪表盘。

用法

DashboardSearch 组件扩展了 CommandPalette 组件,因此您可以传递任何属性,例如 iconplaceholder 等。

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

layouts/dashboard.vue
<template>
  <UDashboardGroup>
    <UDashboardSidebar>
      <UDashboardSearchButton />
    </UDashboardSidebar>

    <UDashboardSearch />

    <slot />
  </UDashboardGroup>
</template>
您可以通过按下 K 组合键、使用 DashboardSearchButton 组件或使用 v-model:open 指令来打开 CommandPalette。

快捷键

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

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

颜色模式

默认情况下,会向命令面板添加一组命令,以便您可以在亮色模式和暗色模式之间切换。这仅在特定页面中未通过 definePageMeta 强制指定 colorMode 时生效。

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

通过将 color-mode 属性设置为 false 可以禁用此行为。

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

API

属性

属性默认值类型
colorMode

true

boolean

shortcut

'meta_k'

string

icon

appConfig.ui.icons.search

string

搜索输入框中显示的图标。

open

boolean

loading

boolean

true 时,显示加载图标。

loadingIcon

appConfig.ui.icons.loading

string

loading 属性为 true 时显示的图标。

searchTerm

string

placeholder

string

命令面板搜索输入框的占位文本。

groups

CommandPaletteGroup<CommandPaletteItem>[]

fuse

{}

UseFuseOptions<CommandPaletteItem>

选项,用于useFuse传递给CommandPalette.

ui

{ modal?: ClassNameValue; input?: ClassNameValue; } & { root?: ClassNameValue; input?: ClassNameValue; close?: ClassNameValue; ... 19 more ...; itemLabelSuffix?: ClassNameValue; }

插槽

插槽类型
empty

{ searchTerm?: string | undefined; }

close

{ ui: { root: (props?: Record<string, any> | undefined) => string; input: (props?: Record<string, any> | undefined) => string; close: (props?: Record<string, any> | undefined) => string; ... 19 more ...; itemLabelSuffix: (props?: Record<...> | undefined) => string; }; }

item

{ item: CommandPaletteItem; index: number; }

item-leading

{ item: CommandPaletteItem; index: number; }

item-label

{ item: CommandPaletteItem; index: number; }

item-trailing

{ item: CommandPaletteItem; index: number; }

content

{}

事件

事件类型
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]',
        input: '[&>input]:text-base/5'
      }
    }
  }
})
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]',
            input: '[&>input]:text-base/5'
          }
        }
      }
    })
  ]
})
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]',
            input: '[&>input]:text-base/5'
          }
        }
      }
    })
  ]
})