iter(g33): 新增 upload 文件选择组件
This commit is contained in:
+28
-1
@@ -1,6 +1,6 @@
|
||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||
|
||||
> 自动生成于 2026-10-26T03:43:04.201Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 自动生成于 2026-10-26T03:44:14.447Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||
|
||||
## 快速上手
|
||||
@@ -1089,6 +1089,32 @@ const sel = signal(''); tree({ nodes: [{ key: 'src', label: 'src', children: [{
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-tree
|
||||
|
||||
### upload — 文件选择 Upload
|
||||
|
||||
参数:
|
||||
|
||||
- accept:string —— 接受的类型(同原生 accept),如 'image/*,.pdf'
|
||||
- multiple:boolean —— 允许多选;缺省 false(单选时新选择覆盖旧的)
|
||||
- hint:string —— 提示文案;缺省「点击或拖拽文件到此处」
|
||||
- disabled:boolean —— 禁用:不可点选、不接受拖拽
|
||||
- onChange(回调):(files: File[]) => void —— 文件变化回调:选择/拖拽/移除后都触发,回传副本
|
||||
|
||||
示例:
|
||||
|
||||
```
|
||||
upload({ multiple: true, accept: 'image/*', hint: '拖拽图片到此处', onChange: (files) => console.log(files.map((f) => f.name)) })
|
||||
```
|
||||
|
||||
手把手:
|
||||
|
||||
1. 组件只做「选文件 + 回传」,onChange 里拿 File[] 自行决定上传接口(fetch/FormData 都行)
|
||||
2. multiple: true 允许多选,重复的文件(同名同大小)自动跳过;单选模式下新选择覆盖旧文件
|
||||
3. accept 透传原生 accept 限制可选类型,但仍需在 onChange 里二次校验扩展名
|
||||
4. 键盘:区域可 Tab 聚焦,Enter/空格 打开选择器;拖拽时区域高亮,拖出恢复
|
||||
5. disabled 时不可点选、不接受拖拽;已选清单的 × 会触发 onChange 回传剩余文件
|
||||
|
||||
现场演示:apps/docs/demo.html#sec-upload
|
||||
|
||||
API 速览:
|
||||
|
||||
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用
|
||||
@@ -1134,6 +1160,7 @@ API 速览:
|
||||
- list(props):列表,header/footer 外壳 + 条目 avatar/title/description/extra,onItemClick 让条目可点击,items 为空回落空状态
|
||||
- carousel(props):轮播,items 横排位移,指示点/箭头/←→ 键切换,autoplay 毫秒自动前进且悬停暂停,index 信号可外部受控
|
||||
- tree(props):树形,递归节点 + 箭头展开/收起 + 点选节点,键盘 Enter 选中、→ 展开、← 收起,禁用节点不响应
|
||||
- upload(props):文件选择,点击或拖拽入列,清单可逐个移除,onChange 回传文件数组(不内置上传请求)
|
||||
|
||||
一行用法:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user