ExtractShortcuts Bearbeiten

Ein Dienstprogramm, um Tastaturkürzel aus Menüelementen zu extrahieren.

@@@ph000@Verwendung

Verwenden Sie das automatisch importierte extractShortcuts Utility, um Tastaturkürzel aus Menüelementen zu definieren. Es extrahiert Verknüpfungen aus Komponenten wie DropdownMenu, oder , wo Elemente haben kbds definiert.

<script setup lang="ts">
const items = [{
  label: 'Save',
  icon: 'i-lucide-file-down',
  kbds: ['meta', 'S'],
  onSelect() {
    save()
  }
}, {
  label: 'Copy',
  icon: 'i-lucide-copy',
  kbds: ['meta', 'C'],
  onSelect() {
    copy()
  }
}]

defineShortcuts(extractShortcuts(items))
</script>

Weitere Informationen zu Tastaturkürzeln finden Sie in der Dokumentation defineShortcuts composable.

@@@@@@38@@bmmmmwh

{lang="ts-type"}

Extrahiert Tastaturkürzel aus einem Array von Menüelementen und gibt ein mit defineShortcuts kompatibles Konfigurationsobjekt zurück.

Parameter Bearbeiten

items

any[] | any[][] required

Ein Array von Menüelementen (oder verschachtelten Arrays), die Shortcut-Definitionen enthalten. Jedes Element kann die folgenden Eigenschaften haben:

separator

'_' | '-'

Verwenden Sie '_' für Tastenkombinationen (z. B.meta_k) oder '-' für Tastenfolgen (z. B.g-d).

Returns: A ShortcutsConfig Objekt, das direkt an defineShortcuts übergeben werden kann.

@@ph054@@Beispiele

Mit verschachtelten Elementen

Das Dienstprogramm durchläuft rekursiv die Eigenschaften children und items, um Verknüpfungen aus verschachtelten Menüstrukturen zu extrahieren.

<script setup lang="ts">
import type { DropdownMenuItem } from '@nuxt/ui'

const items: DropdownMenuItem[][] = [[{
  label: 'Edit',
  icon: 'i-lucide-pencil',
  kbds: ['E'],
  onSelect() {
    edit()
  }
}, {
  label: 'Duplicate',
  icon: 'i-lucide-copy',
  kbds: ['D'],
  onSelect() {
    duplicate()
  }
}], [{
  label: 'Invite users',
  icon: 'i-lucide-user-plus',
  children: [[{
    label: 'Invite by email',
    icon: 'i-lucide-send-horizontal',
    kbds: ['meta', 'E'],
    onSelect() {
      inviteByEmail()
    }
  }, {
    label: 'Invite by link',
    icon: 'i-lucide-link',
    kbds: ['meta', 'I'],
    onSelect() {
      inviteByLink()
    }
  }]]
}], [{
  label: 'Delete',
  icon: 'i-lucide-trash',
  kbds: ['meta', 'backspace'],
  onSelect() {
    remove()
  }
}]]

defineShortcuts(extractShortcuts(items))
</script>

<template>
  <UDropdownMenu :items="items">
    <UButton label="Actions" />
  </UDropdownMenu>
</template>

Mit Schlüsselsequenzen

Verwenden Sie den separator Parameter, um Tastenfolgen anstelle von Tastenkombinationen zu erstellen.

<script setup lang="ts">
const items = [{
  label: 'Go to Dashboard',
  kbds: ['G', 'D'],
  onSelect() {
    navigateTo('/dashboard')
  }
}, {
  label: 'Go to Settings',
  kbds: ['G', 'S'],
  onSelect() {
    navigateTo('/settings')
  }
}]

// Using '-' creates key sequences: 'g-d', 'g-s'
defineShortcuts(extractShortcuts(items, '-'))
</script>

extendLocale

A utility to extend an existing locale with custom translations.

useOverlay

A composable to programmatically control overlays.