ExtracciónCortos

Una utilidad para extraer atajos de teclado de los elementos del menú.

@@pH000@@Uso del producto

Utilice la utilidad extractShortcuts de importación automática para definir atajos de teclado desde elementos de menú. Extrae atajos de componentes como DropdownMenu,ContextMenu o CommandPalette donde los elementos tienen kbds definidos.

<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>

Obtenga más información sobre los atajos de teclado en la documentación componible defineShortcuts.

@380000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

@@@pH039 @

Extrae atajos de teclado de una matriz de elementos de menú y devuelve un objeto de configuración compatible con defineShortcuts.

Parámetros

items

any[] | any[][] required

Una matriz de elementos de menú (o matrices anidadas) que contiene definiciones de accesos directos. Cada elemento puede tener las siguientes propiedades:

separator

'_' | '-'

Utilice '_' para combinaciones de teclas (por ejemplo,meta_k) o '-' para secuencias de teclas (por ejemplo,g-d).

Devuelve: Un objeto que se puede pasar directamente a defineShortcuts.

@@P054@Ejemplos

Con artículos anidados

La utilidad recorre recursivamente las propiedades children y items para extraer accesos directos de estructuras de menú anidadas.

<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>

Con secuencias clave

Utilice el parámetro separator para crear secuencias de teclas en lugar de combinaciones de teclas.

<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.