Svelte 实现 keypress 快捷键功能


字数:443 阅读时长:1分钟 阅读:85

有些框架中内置了常用的事件修饰符和按键修饰符,例如:Vue 中就提供了按键 .enter.13),修饰键 .ctrl.alt.shift.meta等修饰符,简化了很多快捷键功能的实现。在 Svelte 中也提供了 preventDefaultstopPropagationonce 等事件修饰符,但是没有内置快捷键修饰符。

Svelte Keypress

一、Svelte 事件修饰符

Svelte 中使用 | 字符为 DOM 事件添加修饰符。可以使用的修饰符有:

修饰符作用
preventDefault在程序运行之前调用 event.preventDefault()
stopPropagation调用 event.stopPropagation(), 防止事件到达下一个标签
passive改善了 touch/wheel 事件的滚动表现(Svelte 会在合适的地方自动加上它)
capture表示在 capture 阶段而不是 bubbling 触发其程序
once程序运行一次后删除自身
self仅当 event.target 是其本身时才执行

例:带 once 修饰符的事件处理程序只运用一次。

1
2
3
4
5
6
7
8
9
<script>
function handleClick() {
alert('只提示一次')
}
</script>

<button on:click|once={handleClick}>
点击
</button>

二、Svelte 实现快捷键

<svelte:window> 标签允许你添加事件监听到 window 对象,从而不用担心移除它时 component 被毁,或者在服务端渲染时检查是否存在于 window。

实现 Esc 关闭弹窗和 Ctrl+S 提交保存的快捷键。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<svelte:window on:keydown={handleKeydown}/>

{#if show }
<div class="box"></div>
{/if}

<script>
let show = false

function handleKeydown(e) {
let {
keyCode,
ctrlKey,
} = e
// Esc 关闭
if (keyCode===27) show = false
// Ctrl + S 提交保存
if (ctrlKey && keyCode === 83) {
save()
// 阻止浏览器默认的保存网页功能
e.preventDefault()
}
}

function save() {
// do something
}
</script>

欢迎访问:天问博客

本文作者: Tiven
发布时间: 2022-11-17
最后更新: 2022-11-17
本文标题: Svelte 实现 keypress 快捷键功能
本文链接: https://www.tiven.cn/p/d6319ec7/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^