DashboardSearchPRO

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

用法

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

将其用于 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

string

输入框中显示的图标。

placeholder

t('commandPalette.placeholder')

string

输入框的占位文本。

autofocus

true

boolean

组件挂载时自动聚焦输入框。

loading

boolean

当为 true 时,将显示加载图标。

loadingIcon

appConfig.ui.icons.loading

string

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

close

true

boolean | Partial<ButtonProps>

在输入框中显示关闭按钮(例如在模态框中使用时很有用)。{ size: 'md', color: 'neutral', variant: 'ghost' }

closeIcon

appConfig.ui.icons.close

string

关闭按钮中显示的图标。

shortcut

'meta_k'

string

用于打开搜索的键盘快捷键(由defineShortcuts)

分组

CommandPaletteGroup<CommandPaletteItem>[]

fuse

{}

UseFuseOptions<CommandPaletteItem>

用于 `useFuse` 的选项useFuse传递给CommandPalette.

colorMode

true

boolean

true 时,主题命令将被添加到组中。

description

string

title

string

内容

DialogContentProps & Partial<EmitsToProps<DialogContentImplEmits>>

模态框的内容。

过渡动画

true

boolean

在打开或关闭时为模态框添加动画效果。

叠加层

true

boolean

在模态框后面渲染一个叠加层。

可关闭的

true

boolean

当为 false 时,点击外部或按下 Escape 键时模态框将不会关闭。

全屏

false

boolean

当为 true 时,模态框将占据整个屏幕。

modal

boolean

对话框的模态性。当设置为 true 时,
与外部元素的交互将被禁用,并且只有对话框内容对屏幕阅读器可见。

portal

true

string | false | true | HTMLElement

在传送门中渲染模态框。

open

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; itemLabel?: ClassNameValue; itemLabelBase?: ClassNameValue; itemLabelPrefix?: ClassNameValue; itemLabelSuffix?: ClassNameValue; }

插槽

插槽类型

{ searchTerm?: string | undefined; }

页脚

{ ui: {}; }

返回

{ ui: {}; }

close

{ ui: {}; }

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