帮助支持维护此软件包 赞助我。 。 。 .

Alpine.js 鼠标陷阱

一个简单的库,用来处理与Alpine.js的键盘快捷键.

关于

此插件添加了一个新的 x-mousetrap 指示您所有可用于注册键盘快捷键的高山元件 .

安装

光盘N

包括以下内容: <script> 标记在 <head> 在阿尔卑斯山之前.

<script src="https://cdn.jsdelivr.net/npm/@danharrin/[email protected]/dist/alpine-mousetrap.js" defer></script>

国家预防机制

npm install @danharrin/alpine-mousetrap --save-dev

添加数据 x-mousetrap 通过导入软件包对您的工程进行指令 在此之前 阿尔平.js.

import Alpine from 'alpinejs'
import Mousetrap from '@danharrin/alpine-mousetrap'

Alpine.plugin(Mousetrap)

window.Alpine = Alpine
window.Alpine.start()

使用量

要注册按钮或其他可点击元素的键盘快捷键:

<div x-data="{}">
    <button
        type="button"
        x-mousetrap.command-k.ctrl-k
    >
        Button
    </button>
</div>

看看原来的 鼠标陷阱 文档,以获取更多快捷方式.

如果快捷键使用 +,替换为 a -如果快捷键是一个序列,则以 --。如果您要注册一个以上的快捷键,请将它们分出一段时间.

也可以在键盘快捷键被击中时引用自定义函数:

<div x-data="{}">
    <button
        type="button"
        x-mousetrap.command-k.ctrl-k="console.log('command k or control k')"
    >
        Button
    </button>
</div>

全球约束

您可以聆听“ 全球” 键盘事件, 可以在任何地方工作, 包括内部输入字段:

<div x-data="{}">
    <button
        type="button"
        x-mousetrap.global.command-k.ctrl-k
    >
        Button
    </button>
</div>

斜线 (/)

您可以使用关键词"slash"收听按键事件 :

<div x-data="{}">
    <button
        type="button"
        x-mousetrap.global.slash
    >
        Button
    </button>
</div>

版本

本项目遵循 语义版本 准则.

许可证

版权(c) Dan Harrin

麻省理工学院颁发的执照,见 利比里亚 详细情况.