配置快捷键
自 v0.20 起可用
Since v0.35.6 (excluded), you decide which base shortcuts to keep (see
...base,
below).
环境: client
此配置仅在客户端环境下运行。在引入包时,请确保浏览器的兼容性。
开始使用
创建一份包含以下内容的 ./setup/shortcuts.ts
文件:
ts
import type { NavOperations, ShortcutOptions } from '@slidev/types'
import { defineShortcutsSetup } from '@slidev/types'
export default defineShortcutsSetup((nav: NavOperations, base: ShortcutOptions[]) => {
return [
...base, // keep the existing shortcuts
{
key: 'enter',
fn: () => nav.next(),
autoRepeat: true,
},
{
key: 'backspace',
fn: () => nav.prev(),
autoRepeat: true,
},
]
})
在配置时,你可以添加或者一些自定义的快捷键。例如,上面的配置为 enter 绑定了下一动画或幻灯片,为 backspace 绑定了上一动画或幻灯片。
配置函数会接收一个封装有导航函数的对象参数,返回一个快捷键配置信息的数组,你可以参考其类型定义获得详细信息。
高级键盘绑定
该 key
仅支持字符串类型,但你也可以使用如下约定绑定多个快捷键:
ts
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,
}
]
})
高级导航功能
导航操作 nav
比下一张或上一张幻灯片这样的基础功能更加强大。请参阅下面的用例:
ts
import { NavOperations, defineShortcutsSetup } from '@slidev/types'
export default defineShortcutsSetup((nav: NavOperations) => {
return [
{
key: 'e',
// Set the `e` keyboard shortcut to be used as a bookmark
// or quick-access of sorts, to navigate specifically to
// slide number 42
fn: () => nav.go(42),
autoRepeat: true,
}
]
})
关于键盘事件,请参考 useMagicKeys | VueUse。