maomi
介绍
入门
文档

事件

事件绑定

可以在 DOM 事件上绑定监听器。

use maomi_dom::event::*;
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div click=@handle_click()> "Click Me" </div>
}
}
impl MyWebsite {
fn handle_click(this: ComponentEvent<Self, MouseEvent>) {
this.task(move |this| {
// update component here
})
}
}

自定义事件参数

绑定监听器时，可以添加额外的参数。

只有引用可以作为参数（且数据类型必须实现有 Clone 或 ToOwned ）

use maomi_dom::event::*;
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div click=@handle_click(&self.my_string_data)> "Click Me" </div>
},
my_string_data: String,
}
impl MyWebsite {
fn handle_click(_this: ComponentEvent<Self, MouseEvent>, s: &str) {
log::debug!("Clicked: {}", s);
}
}

tap 事件

maomi 提供了 tap 事件作为 mouse 事件和 touch 事件的结合。

#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div tap=@handle_tap()> "Click Me" </div>
}
}
impl MyWebsite {
fn handle_tap(_this: ComponentEvent<Self, TapEvent>) {
log::debug!("Tapped");
}
}

也可以使用 long tap 事件。

#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div tap=@handle_tap() long_tap=@handle_long_tap()> "Click Me" </div>
}
}
impl MyWebsite {
fn handle_tap(_this: ComponentEvent<Self, TapEvent>) {
log::debug!("Tapped");
}
fn handle_long_tap(_this: ComponentEvent<Self, TapEvent>) {
// 阻止对应 tap 事件的生成
ev.prevent_default();
log::debug!("Long tapped");
}
}
< 模板更新
样式类 >
基础入门
编写一个组件
模板语法
模板节点
模板分支
模板列表
模板更新
事件
样式表
样式类
条件样式
样式常量
样式函数
全局样式表
组件
使用组件
组件事件
属性
高级特性
服务器端渲染
i18n 国际化支持
性能建议
运行时性能建议
编译期性能建议