80 lines
3.7 KiB
JSON
80 lines
3.7 KiB
JSON
{
|
|
"slug": "dragupload",
|
|
"end": "html",
|
|
"curated": true,
|
|
"summary": "原生 H5 拖拽上传区：data-id 标记删除按钮，is-over 类表示拖拽悬停，进度与缩略图由脚本重绘。",
|
|
"usage": [
|
|
"页面里预先写好 .kole-upload 结构（drop 区、隐藏 file input、list 容器），脚本只按 id 取节点接线，不像 React 端那样整块生成。",
|
|
"拖拽高亮用 is-over 类：dragenter 与 dragover 都 preventDefault 后加类，dragleave 与 drop 都移除该类。",
|
|
"列表由 render() 用 innerHTML 整块重建，每个删除按钮带 data-id，list 上用事件委托加 closest([data-id]) 判定删除目标。",
|
|
"与 React 端不同，这里每个文件只记一份 item 对象，进度由 simulate() 内的计时器直接改进该对象再 render。",
|
|
"文件类型与大小判断同样限制在 image/ 且小于 2MB 才读缩略图，缩略图回填后再次 render。"
|
|
],
|
|
"bestPractices": [
|
|
"drop 区与列表节点上都静态写了 role=button 与 tabindex=0，但脚本没有绑定键盘事件，属于只标注不可用的状态。",
|
|
"render 用 innerHTML 拼接文件名，文件名含尖括号会破坏结构，接入时要改成 textContent 或转义。",
|
|
"drop 上同时绑了 dragleave 与 drop 清高亮，从 drop 区内部子元素移出时会触发 dragleave，虚框可能闪动。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "attrs",
|
|
"note": "HTML 端无 props，载体为：包装元素上的 role 与 tabindex 表可交互、data-id 承担列表项取值、kole-* 类名定结构、is-over 状态类表达拖拽悬停。",
|
|
"table": [
|
|
{
|
|
"name": "data-id",
|
|
"type": "文件 id 字符串",
|
|
"desc": "落在删除按钮上，列表容器用 closest 命中即表示要删除该文件"
|
|
},
|
|
{
|
|
"name": "is-over",
|
|
"type": "状态类",
|
|
"desc": "拖拽悬停时加在 .kole-upload-drop 上，dragleave 与 drop 时移除"
|
|
},
|
|
{
|
|
"name": "kole-upload-drop",
|
|
"type": "类名",
|
|
"desc": "虚线拖拽区，点击与拖拽事件都绑在它上面"
|
|
},
|
|
{
|
|
"name": "kole-upload-list",
|
|
"type": "类名",
|
|
"desc": "文件列表容器，删除走它上面的 click 委托"
|
|
},
|
|
{
|
|
"name": "kole-upload-bar",
|
|
"type": "类名",
|
|
"desc": "单个文件的进度条外框，内层 i 的 width 由脚本写成百分比"
|
|
},
|
|
{
|
|
"name": "kole-upload-status",
|
|
"type": "类名",
|
|
"desc": "文本状态位，未完成显示取整百分比，完成后显示已完成"
|
|
}
|
|
]
|
|
},
|
|
"a11y": [
|
|
"拖拽区与列表都带 role=button 与 tabindex=0，但只有鼠标事件，键盘回车不会打开选择框或删除文件。",
|
|
"role=button 被重复写在容器、列表、每个文件名与状态文本上，读屏器会把整行读成一串按钮，反而更难理解。",
|
|
"进度没有 role=progressbar，进度变化也不在 aria-live 区域里，只有百分比文本随重绘刷新。"
|
|
],
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/DragUpload.html",
|
|
"kind": "HTML 实现",
|
|
"desc": "DragUpload.html —— 本端实现全文（结构、事件与状态逻辑）"
|
|
},
|
|
{
|
|
"file": "frameworks/DragUpload.css",
|
|
"kind": "样式文件",
|
|
"desc": "frameworks/DragUpload.css —— 本端 kole-* 类名与 is-* 状态类的样式定义"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"dragupload-ex-1"
|
|
],
|
|
"notes": [
|
|
"拖拽事件绑定与 is-over 切换见 frameworks/DragUpload.html:35-41。",
|
|
"data-id 生成见 frameworks/DragUpload.html:74，删除委托见第 78-81 行。",
|
|
"缩略图条件与模拟进度见 frameworks/DragUpload.html:47-63。"
|
|
]
|
|
}
|