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.