#leptos #element #plus #component

leptos_element_plus

element-plus 的 leptos 包装器

6 个版本

0.0.6 2023 年 12 月 18 日
0.0.5 2023 年 11 月 12 日

2093网页编程 中排名

Download history 33/week @ 2024-03-30 7/week @ 2024-04-06

每月下载量 63

MIT 许可证

1MB
3K SLoC

Element PlusLeptos 提供的包装器。

探索 Vue 组件与 Leptos 的结合,仅仅是为了重用轮子。

简单

main.rs
mod app;

use leptos::*;
use leptos_meta::provide_meta_context;

use app::*;
use leptos_element_plus::ElementPlusSetup;

fn main() {
    _ = console_log::init_with_level(log::Level::Debug);

    provide_meta_context();
    mount_to_body(|| {
        view! {
            <ElementPlusSetup/>
            <App/>
        }
    })
}
app.rs
use leptos::*;
use leptos::logging::log;
use js_sys::Date;

use leptos_element_plus::components::el_date_time_picker::DateTimePicker;

#[component]
pub fn App() -> impl IntoView {
    let date = create_rw_signal(Date::new_0());
    create_effect(move|_| {
        log!("date: {:?}", date.get().to_string());
    });
    view! {
        <div class="flex flex-col p-6 space-y-4">
            <DateTimePicker
                value=date
                placeholder="Select date and time"
            />
        </div>
    }
}

依赖项

~24–41MB
~543K SLoC