Définition Raccourcis

Un composable pour définir des raccourcis clavier dans votre application.

@@ph000@utilisation

Utilisez le composable defineShortcuts auto-importé pour définir des raccourcis clavier.

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

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

Les raccourcis - sont automatiquement ajustés pour les plates-formes non-macOS, en convertissant meta en ctrl.

  • Le composable utilise le useEventListener de VueUse pour gérer les événements de clé.
  • Pour une liste complète des touches de raccourci disponibles, reportez-vous à la documentation de l'API KeyboardEvent.key. Les touches dans la configuration ne sont pas sensibles à la casse, donc meta_k et meta_K sont équivalentes.
Découvrez comment afficher les raccourcis dans les composants dans la documentation du composant Kbd.

@@ph032@api

@@

Définissez des raccourcis clavier pour votre application. Renvoie une fonction qui supprime l'écouteur, au cas où vous auriez besoin d'arrêter les raccourcis avant que le composant ne se démonte.

Paramètres

config
MaybeRef<ShortcutsConfig> required
Un objet où les touches sont des définitions de raccourcis et les valeurs sont soit des fonctions de gestionnaire ou des objets de configuration de raccourcis. Passez un ref pour mettre à jour les raccourcis de manière réactive. Une valeur de false,null ou undefined saute ce raccourci, c'est ainsi que vous activez un raccourci conditionnellement.
options
ShortcutsOptions
Configuration optionnelle du comportement des raccourcis.

Définition du raccourci

Les raccourcis sont définis selon le format suivant:

  • Clé unique: 'a','b','1','?', etc.
  • Combinaisons de clés: Utilisez _ pour séparer les clés, par exemple 'meta_k','ctrl_shift_f'
  • Séquences clés: utilisez - pour définir une séquence, par exemple 'g-d'

Modifier

  • meta/command: Représente ⌘ Command sur macOS et Ctrl sur d'autres plateformes
  • ctrl: Représente Ctrl sur toutes les plateformes
  • shift: Utilisé pour les touches alphabétiques lorsque Shift est requis
  • alt/option: Représente ⌥ Option sur macOS et Alt sur d'autres plates-formes. Correspond par position de clé physique, puisque Option réécrit le caractère sur macOS

Clés spéciales

Utilisez ces noms pour faire correspondre des clés spéciales.

  • escape: Déclencheurs sur la touche Esc
  • enter: Déclencheurs sur la touche Entrée
  • arrowleft,arrowright,arrowup,arrowdown: Déclenchement sur les touches fléchées respectives
  • tab: Déclencheurs sur la touche Tab
  • backspace: Déclencheurs sur la touche Backspace
  • delete: Déclencheurs sur la touche Delete
  • space: Déclencheurs sur la barre d'espace. Nécessite layoutIndependent sauf combinaison avec alt

Configuration du raccourci

Chaque raccourci peut être défini comme une fonction ou un objet avec les propriétés suivantes:

@@

@@ph099@paramètres

handler
(e?: KeyboardEvent) => void required
Fonction à exécuter lorsque le raccourci est déclenché. Elle reçoit le KeyboardEvent d'origine.
usingInput
boolean | string
Contrôle le moment où le raccourci doit se déclencher en fonction du focus en entrée:
  • false(par défaut): Le raccourci se déclenche uniquement lorsqu 'aucune entrée n'est focalisée
  • true: Le raccourci se déclenche même lorsqu 'une entrée est focalisée
  • string: Le raccourci se déclenche uniquement lorsque l'entrée spécifiée (par nom) est focalisée

@@ph107@Exemples

Utilisation de base

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

Avec manipulation de la mise au point en entrée

Utilisez usingInput pour déclencher un raccourci uniquement lorsqu 'une entrée spécifique est focalisée.

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

Extraire des raccourcis des éléments de menu

Utilisez l'utilitaire extractShortcuts pour définir automatiquement des raccourcis à partir d'éléments de menu.

En savoir plus sur l'utilitaire extractShortcuts.

defineLocale

A utility to create a custom locale for your app.

extendLocale

A utility to extend an existing locale with custom translations.