svelte - 如何将键盘导航添加到苗条的应用程序（窗口对象除外）？

Question

我想将键盘导航添加到我的苗条应用程序中。我知道可以使用 svelte 的窗口对象，例如<svelte:window on:keydown={handleKeydown}/>. 然而生成的代码并不是很好，因为它将窗口对象的使用分散到整个应用程序中。

理想情况下，我想使用类似于 vue 的语法来编写<input v-on:keyup.page-down="onPageDown">.

在 svelte 中也可能出现类似的情况吗？我错过了任何苗条的附加组件吗？

标签： svelte

Answer 1

您可以将事件侦听器附加到输入元素：

<input on:keyup={handleKeyUp}/>

<script>
  function handleKeyUp(event) {
    // ..
  }
</script>

如果您想要与问题中的语法相同的语法，则可以使用如下操作：

<input use:keyup={{PageDown: onPageDown}}/>

<script>
  import { keyup } from './keyup.js';

  function onPageDown() { ... }
</script>

export function keyup(node, map) {
    
    const listener = (e) => { if (map[e.key]) map[e.key](e); }
    
    node.addEventListener("keyup", listener);
    
    return {
        destroy() { node.removeEventListener("keyup", listener); }
    }
}

在这里的 repl和关于 svelte action 的文档中看到它