Rust-Wasm 向 Vue3 传递函数,并绑定到dom事件上
本人想通过由 Rust 语言 写的事件函数经过编译成 Webassembly
然后给 Vue3 的事件绑定函数使用
Rust 语言使用的包为 wasm-bindgen
编译工具为 wasm-pack
编译命令:$ wasm-pack build --target web
Cargo.toml:
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2.55"
gloo = "0.2.0"
[dependencies.web-sys]
version = "0.3.4"
features = [
'Document',
'Element',
# 'CssStyleDeclaration',
'HtmlElement',
# 'HtmlParagraphElement',
# 'HtmlTextAreaElement',
# 'Node',
'Window',
'console',
'KeyboardEvent',
]
Rust 代码:
#[wasm_bindgen]
pub fn hidesibebar(e:web_sys::KeyboardEvent){
console_log!("ok1");
console_log!("{}",e.key())
// if e.ctrl_key() && e.alt_key(){
// console_log!("true");
// }
}
#[wasm_bindgen]
extern "C" {
#[wasm_bindgen(js_namespace = console)]
fn log(s:&str);
}
macro_rules! console_log {
($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}
Vue3 代码
<template>
<div class="TagsContainer" @keydown="hidesibebar">
<ul>
<li>123</li>
<li>123</li>
</ul>
</div>
</template>
<script>
import "keyevent/keyevent_bg.wasm"
import init,{hidesibebar} from "keyevent/keyevent.js"
import {defineComponent} from "vue"
export default defineComponent({
async setup(){
// async function run() {
// await init()
// }
let wasm = await init()
// console.log(wasm);
// let hidesibebar = wasm.hidesibebar
// let hidesibebar = hidesibebar
return {hidesibebar}
}
})
</script>
<div>
<Suspense>
<tagscontainer></tagscontainer>
</Suspense>
<div/>
//...
//...
//...
我使用了 Vite 来运行了这个项目
wasm 文件要被线上初始化,所以我引入了这个文件 keyevent/keyevent_bg.wasm
我从它的外包 JS 文件keyevent/keyevent.js
引入 init 方法与 Rust函数 编译出来的函数
并要使用 async setup 来异步初始化 init
且这个组件被使用要使用 Suspense
包裹
可从 Vite playground借鉴
但是在 Rust 代码中 hidesibebar
函数中
如果我不写对 事件参数e:web_sys::KeyboardEvent
调用
只有 console_log!("ok");
是可以被绑定上,
但我是想使用这个事件参数,不知道怎么解决,希望有解决方案
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论