素材选择弹窗`AssetPickerModal`

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

亲手试一试。

01 / LIVE PREVIEW

本地演示，选择不会写入文章。

已选 2 张

STATES / 示例状态

单选多选搜索跨页选择

本地演示，内容不会保存。

INTERACTIVE SPECIMEN · 跟随全站主题

用法

02 / USAGE

下方展示组件的调用方式。

let mut visible = use_signal(|| false);
let uploading = use_signal(|| false);
let mut picked = use_signal(Vec::<AssetSelection>::new);
rsx! {
    button { onclick: move |_| visible.set(true), "从素材库选择" }
    AssetPickerModal {
        visible,
        cover_uploading: uploading,
        title: "选择文章图片",
        multi: true,
        on_select: move |items: Vec<AssetSelection>| picked.set(items),
    }
}

主要属性

03 / PROPERTIES

属性 / 类型	默认值	说明
`visible`Signal<bool>	由调用方提供	素材选择弹窗的 visible 参数。
`on_select`EventHandler<Vec<AssetSelection>>	由调用方提供	素材选择弹窗的 on_select 参数。
`cover_uploading`Signal<bool>	由调用方提供	素材选择弹窗的 cover_uploading 参数。
`title`&'static str	由调用方提供	素材选择弹窗的 title 参数。
`multi`bool	由调用方提供	素材选择弹窗的 multi 参数。

YGGDRASIL · 每一个细节，都有回应。src/components/assets/asset_picker.rs