leptos-hotkeys

声明式创建和配对Leptos应用程序的键绑定与回调。

Leptos-hotkeys创建和管理键盘快捷键。它提供了宏和函数，简化了键绑定的定义，因为与键盘交互相关的事件生命周期管理已经为您完成！

实时示例

想看看它是如何工作的吗？ 查看演示。

要开始使用，请参考快速入门部分。

功能

[!NOTE] 此crate有三种类型的快捷键：全局、范围和焦点捕获。

use_hotkeys! 宏

使用此宏来声明全局和范围快捷键。此宏保留了Leptos标准，同时具有js语法的特性。 关于宏的更多信息。

全局快捷键

此示例创建了两个全局快捷键： W 和 F。

use leptos_hotkeys::use_hotkeys;

#[component]
pub fn SomeComponent() -> impl IntoView {
    let (count, set_count) = create_signal(0);

    // creating a global scope for the W key
    use_hotkeys!(("keyw") => move |_| {
        logging::log!("w has been pressed");
        set_count.update(|c| *c += 1);
    });

    // this is also a global scope for the F key!
    use_hotkeys!(("keyf", "*") => move |_| {
        logging::log!("f has been pressed");
        set_count.update(|c| *c -= 1);
    });

    view! { <p>Num Respects: {count}</p> }
}

[!TIP] 如何编写某些键？请参阅键语法。

[!NOTE] * 符号是全局范围的保留字。

W 快捷键省略了范围参数，隐式地使其成为全局的。

范围快捷键

范围提供了快捷键背后的上下文。此上下文可以链接到组件、状态或逻辑。

此示例显示了内部和外部范围以及切换范围的快捷键。

use leptos_hotkeys::{use_hotkeys, use_hotkeys_context, HotkeysContext};

#[component]
pub fn SomeComponent() -> impl IntoView {

    let HotkeysContext { enable_scope, disable_scope, .. } = use_hotkeys_context();

    // switch into the inner scope
    use_hotkeys!(("keyi", "outer") => move |_| {
        disable_scope("outer");
        enable_scope("inner");
    });

    // switch into the outer scope
    use_hotkeys!(("keyo", "inner") => move |_| {
        disable_scope("inner");
        enable_scope("outer");
    });

    view! {
        <div id="outer">
            // outer logic residing...
            <div id="inner">
            // inner logic
            </div>
        </div>
    }
}

[!NOTE] 范围不区分大小写。这意味着 my_scope 和 mY_sCoPe 被认为是相同的范围。

焦点捕获快捷键（use_hotkeys_ref! 宏）

此示例将快捷键嵌入到 <p> 标签中。只有当元素获得焦点且范围正确时，此快捷键才会触发。

use leptos_hotkeys::use_hotkeys_ref;

#[component]
pub fn SomeComponent() -> impl IntoView {

    let p_ref = use_hotkeys_ref!(("keyk", "*") => move |_| {
        // some logic
    });

    view! {
        <p tabIndex=-1 _ref=p_ref>
            p tag with node ref
        </p>
    }
}

快速入门

安装

cargo add leptos_hotkeys

我们还提供其他功能标志，可增强开发人员体验，请参阅功能。

provide_hotkeys_context()

在 App() 组件中调用 provide_hotkeys_context()。这将为当前反应节点及其所有后代提供 HotkeysContext。此函数接受三个参数，即 node_ref、一个禁用模糊事件的标志和一个 initially_active_scopes 列表。 provide_hotkeys_context() 返回一个 HotkeyContext。要管理快捷键，您可以从 HotkeysContext 中提取必要的信号。

use leptos_hotkeys::{provide_hotkeys_context, HotkeysContext, scopes};

#[component]
pub fn App() -> impl IntoView {
    provide_meta_context();

    let main_ref = create_node_ref::<html::Main>();
    let HotkeysContext { .. } = provide_hotkeys_context(main_ref, false, scopes!());

    view! {
        <Router>
            <main _ref=main_ref>  // <-- attach main ref here!
                <Routes>
                    <Route path="/" view=HomePage/>
                    <Route path="/:else" view=ErrorPage/>
                </Routes>
            </main>
        </Router>
    }
}

[!注意] 如果您正在使用 作用域，您可以使用特定的作用域进行初始化。

就是这样！您可以创建全局、作用域和焦点捕获的快捷键！

键绑定语法

leptos_hotkeys 匹配来自 KeyboardEvent 的 code 属性 的代码值。为了参考，以下是一个 所有键盘事件代码值列表。

您可以将多个快捷键绑定到回调函数。例如

"KeyG+KeyR,MetaLeft+KeyO,ControlLeft+keyK"

键是大小写不敏感和空白不敏感的。对于具有多个键的快捷键，请使用 , 作为键序列的分隔符。

作用域！()

也许您想在加载时初始化某个作用域，这就是 initially_active_scopes 属性发挥作用的地方。您不需要创建一个 vec!["scope_name".to_string()]，而是使用 scopes!() 宏。

use leptos_hotkeys::{provide_hotkeys_context, scopes};

#[component]
pub fn App() -> impl IntoView {
    let main_ref = create_node_ref::<html::Main>();
    provide_hotkeys_context(main_ref, false, scopes!("scope_a", "settings_scope"));

    view! {
        <Router>
            <main _ref=main_ref>
                <Routes>
                    // ... routes
                </Routes>
            </main>
        </Router>
    }
}

debug 特性标志

通过引入 debug 标志来改善开发者体验，该标志在 CSR 中将日志添加到您的控制台。它记录当前按下的键的 code 值、快捷键触发和作用域切换。

简单来说

leptos_hotkeys = { path = "0.2.1", features = ["debug"] }

贡献者

Álvaro Mondéjar 💻

Robert Junkins 💻

LeoniePhiline 📖

Gábor Szabó 📖

Phillip Baird 🐛

zakstucke 🐛 💻