在Dioxus中获取元素属性

Question

我想知道如何在 Rust 中获取 Dioxus 中的元素属性。更具体地说，如何获取元素的高度和宽度。 CSS 使用 % 而不是 px，我想以某种方式获取元素的 px。

...
div { class: "some_class",
    // get div height here
}
...

提前感谢您的帮助！

我希望不必使用 JavaScript，但目前我不确定 Dioxus 能提供什么支持。

Answer 1

来自https://github.com/DioxusLabs/dioxus/blob/main/examples/read_size.rs：

use std::rc::Rc;

use dioxus::{html::geometry::euclid::Rect, prelude::*};

fn main() {
    dioxus::launch(app);
}

fn app() -> Element {
    let mut div_element = use_signal(|| None as Option<Rc<MountedData>>);
    let mut dimensions = use_signal(Rect::zero);

    let read_dims = move |_| async move {
        let read = div_element.read();
        let client_rect = read.as_ref().map(|el| el.get_client_rect());

        if let Some(client_rect) = client_rect {
            if let Ok(rect) = client_rect.await {
                dimensions.set(rect);
            }
        }
    };

    rsx!(
        document::Link { rel: "stylesheet", href: asset!("./examples/assets/read_size.css") }
        div {
            width: "50%",
            height: "50%",
            background_color: "red",
            onmounted: move |cx| div_element.set(Some(cx.data())),
            "This element is {dimensions():?}"
        }

        button { onclick: read_dims, "Read dimensions" }
    )
}