yew-utils

Yew 是一个用Rust构建WebAssembly前端框架的伟大框架。然而，它并不包含所有功能，并且相当依赖于宏。这个crate不是一个官方的伴随crate，它只是收集了我发现方便的一系列工具和组件。

yew_utils::vdom

宏 html!{} 可能很方便，但它缺乏代码补全，手动开始和结束标签可能会变得繁琐。《code>yew_utils::vdom 允许通过简单的Rust函数调用创建yew节点。

use yew::prelude::*;
use yew_utils::vdom::*;
use gloo_utils::window;
#[function_component(App)]
fn app() -> Html {
  div()
      .append(h1().text("yew-utils vdom example"))
      .append(
          form().append_all([
              label()
                  .attr("style", "font-weight: bold;")
                  .text("a button: "),
              button().text("click").onclick(|_| {
                  window().alert_with_message("hello").unwrap();
              }),
          ]),
      )
      .append(comp::<OtherComponent>())
      .into()
}

#[function_component(OtherComponent)]
pub fn other_component() -> Html {
    text("hello from other component").into()
}

yew_utils::components

一套组件。我可能还会随着时间的推移添加更多。目前包括

下拉列表

use yew_utils::components::drop_down::{DropDown,DropDownProps};
use yew_utils::vdom::*;
use yew::prelude::*;

comp_with::<DropDown<&'static str>>(DropDownProps {
    initial: "item 1",
    options: vec!["item 1", "item 2", "item 3"],
    selection_changed: Callback::from(move |sel: &'static str| {
        gloo_utils::window()
            .alert_with_message(&format!("got selection: {sel:?}"))
            .unwrap();
    }),
})

表格

use yew_utils::components::table::Table;
use yew_utils::vdom::*;
use yew::prelude::*;

let columns = Children::new(
    ["col1", "col2"].map(|ea| text(ea).to_vnode()).to_vec(),
);

let data = 0..5;
let rows = data
    .into_iter()
    .map(|data| {
        tr().key(data.to_string())
            .append_all([
                td().text(data.to_string()),
                td().text(format!("{data} (col2)")),
            ])
            .to_vnode()
    })
    .collect::<Vec<_>>();

let table = Table::render(columns, yew::Children::new(rows));

许可证：MIT