defineShortcuts

Uso

Use o composable defineShortcuts, importado automaticamente, para definir atalhos de teclado.

<script setup lang="ts">
const open = ref(false)

defineShortcuts({
  meta_k: () => {
    open.value = !open.value
  }
})
</script>

• Shortcuts are automatically adjusted for non-macOS platforms, converting meta to ctrl.
• The composable uses VueUse's useEventListener to handle keydown events.
• For a complete list of available shortcut keys, refer to the KeyboardEvent.key API documentation. Note that the key should be written in lowercase.

API

defineShortcuts(config: ShortcutsConfig, options?: ShortcutsOptions): void

Defina atalhos de teclado para a sua aplicação.

Parâmetros

Definição do atalho

Os atalhos são definidos usando o seguinte formato:

• Single key: 'a', 'b', '1', '?', etc.
• Key combinations: Use _ to separate keys, e.g., 'meta_k', 'ctrl_shift_f'
• Key sequences: Use - to define a sequence, e.g., 'g-d'

Modificadores

• meta: Represents ⌘ Command on macOS and Ctrl on other platforms
• ctrl: Represents Ctrl on all platforms
• shift: Used for alphabetic keys when Shift is required

Teclas especiais

• escape: Triggers on Esc key
• enter: Triggers on Enter key
• arrowleft, arrowright, arrowup, arrowdown: Trigger on respective arrow keys

Configuração do atalho

Cada atalho pode ser definido como uma função ou um objeto com as seguintes propriedades:

interface ShortcutConfig { handler: () => void; usingInput?: boolean | string }

Parâmetros

Exemplos

Uso básico

<script setup lang="ts">
defineShortcuts({
  '?': () => openHelpModal(),
  'meta_k': () => openCommandPalette(),
  'g-d': () => navigateToDashboard()
})
</script>

Com tratamento de foco do input

A opção usingInput permite especificar que um atalho só deve ser disparado quando um input específico estiver em foco.

<template>
  <NInput v-model="query" name="queryInput" />
</template>

<script setup lang="ts">
const query = ref('')

defineShortcuts({
  enter: {
    usingInput: 'queryInput',
    handler: () => performSearch()
  },
  escape: {
    usingInput: true,
    handler: () => clearSearch()
  }
})
</script>

Extraindo atalhos dos itens de menu

Use o utilitário extractShortcuts para definir atalhos automaticamente a partir de itens de menu.