素材选择弹窗

AssetPickerModal素材

图鉴使用仓库图片与局部状态;正式弹窗继续分页读取素材库、上传新图,并按 URL 去重返回单项或勾选顺序的多项。

预览

本地演示,选择不会写入文章。
已选 2 张 · 按勾选顺序插入
本地演示,内容不会保存

属性

名称类型默认值说明
visibleRwSignal<bool>由调用方提供素材选择弹窗的 visible 参数。
on_selectCallback<Vec<AssetSelection>>由调用方提供素材选择弹窗的 on_select 参数。
cover_uploadingRwSignal<bool>由调用方提供素材选择弹窗的 cover_uploading 参数。
titleString选择封面图素材选择弹窗的 title 参数。
multiboolfalse素材选择弹窗的 multi 参数。

用法

src/components/assets/asset_picker.rs
Leptos view!
let visible = RwSignal::new(false);
let uploading = RwSignal::new(false);
let picked = RwSignal::new(Vec::<AssetSelection>::new());

view! {
    <button on:click=move |_| visible.set(true)>"\u4ECE\u7D20\u6750\u5E93\u9009\u62E9"</button>
    <AssetPickerModal
        visible=visible
        cover_uploading=uploading
        title="\u9009\u62E9\u6587\u7AE0\u56FE\u7247"
        multi=true
        on_select=move |items: Vec<AssetSelection>| picked.set(items)
    />
}