Esta traducción ya no se mantiene, visite el documento en inglés.
Slidev

Configurar atajos

Disponible desde v0.20

Desde la v0.35.6 (no incluida), puedes decidir qué atajos conservar (veáse ...base, más abajo).

Entorno: client
Esta función de configuración sólo se ejecutará en el lado del cliente. Asegúrate de la compatibilidad del navegador al importar los paquetes.

Crea ./setup/shortcuts.ts con el siguiente contenido:

Primeros pasos

Crea ./setup/shortcuts.ts con el siguiente contenido:

import type { NavOperations, ShortcutOptions } from '@slidev/types'
import { defineShortcutsSetup } from '@slidev/types'

export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]) => {
  return [
    ...base, // mantener los atajos (shortcuts) existentes
    {
      key: 'enter',
      fn: () => nav.next(),
      autoRepeat: true,
    },
    {
      key: 'backspace',
      fn: () => nav.prev(),
      autoRepeat: true,
    },
  ]
})

Con esta configuración, puedes dar ajustes personalizados a los atajos mencionados en Navegación. La configuración anterior vincula la siguiente animación o diapositiva a enter y la animación o diapositiva anterior a retroceso.

La función de configuración recibe un objeto con algunos métodos de navegación, y devuelve un array que contiene la configuración de atajos. Consulta las definiciones de tipo para más detalles.

Echa un vistazo a useMagicKeys | VueUse para más detalles sobre eventos del teclado.

Vinculación avanzada de teclas

El tipo key sólo permite cadenas, pero puedes enlazar múltiples letras utilizando la siguiente convención:

import type { NavOperations, ShortcutOptions } from '@slidev/types'
import { defineShortcutsSetup } from '@slidev/types'

export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]) => {
  return [
    ...base,
    {
      key: 'ShiftLeft+ArrowRight',
      fn: () => nav.next(),
      autoRepeat: true,
    }
  ]
})

Funciones de navegación avanzadas

Las operaciones de navegación nav te permiten acceder a algunas funcionalidades más allá de las básicas siguiente diapositiva o diapositiva anterior. Consulta los siguientes ejemplos:

import { defineShortcutsSetup, NavOperations } from '@slidev/types'

export default defineShortcutsSetup((nav: NavOperations) => {
  return [
    {
      key: 'e',
      
      // Establece el atajo de teclado `e` para usarlo como marcador
      // o una especie de acceso rápido, para navegar específicamente a
      // diapositiva número 42
      fn: () => nav.go(42),
      autoRepeat: true,
    }
  ]
})

Consulta useMagicKeys | VueUse para más detalles sobre el evento de tecla pulsada.