69 lines
3.4 KiB
JSON
69 lines
3.4 KiB
JSON
{
|
||
"slug": "dragupload",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 拖拽上传：拖入或点击选择文件，内部模拟上传进度并生成图片缩略图。",
|
||
"usage": [
|
||
"本端没有任何 props、emit 与插槽，<KoleDragUpload /> 挂上即用，文件列表由内部 files ref 维护（DragUpload.vue3.vue:25）。",
|
||
"拖拽事件用 @dragover.prevent / @drop.prevent 组合，避免浏览器直接打开被拖入的文件（DragUpload.vue3.vue:3）。",
|
||
"点击区域通过 file.click() 转发到隐藏的 input[type=file]，选完即把 e.target.value 清空，便于重复选同一个文件（DragUpload.vue3.vue:42）。",
|
||
"图片且小于 2MB 时用 FileReader.readAsDataURL 生成缩略图，其它类型统一显示「文件」文字（DragUpload.vue3.vue:33）。",
|
||
"进度是 setInterval 每 220ms 随机递增的演示数据，到 100 即标记 done 并清除定时器（DragUpload.vue3.vue:44）。"
|
||
],
|
||
"bestPractices": [
|
||
"进度与完成态都是本地模拟，没有真实上传通道，接入后端时需要自行替换 simulate 并接管 files 结构（DragUpload.vue3.vue:44）。",
|
||
"删除是按下标 id 过滤数组，id 由时间戳加随机串生成；同批次内不会重复，但长时间挂载后 id 会越来越长（DragUpload.vue3.vue:31）。",
|
||
"thumb 只在图片且小于 2MB 时生成，其余类型 key 仍存在但为空串，模板用 v-if 分支渲染占位文字（DragUpload.vue3.vue:10）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端无 defineProps / defineEmits / defineExpose，唯一可用的定制面是模板类名与 is-over 状态类，因此表中列出的是样式钩子而非 prop。",
|
||
"table": [
|
||
{
|
||
"name": "kole-upload-drop",
|
||
"type": "class",
|
||
"desc": "拖拽投放区容器类名；拖拽经过时附加 is-over 状态类"
|
||
},
|
||
{
|
||
"name": "kole-upload-item",
|
||
"type": "class",
|
||
"desc": "单个文件行容器，进度条与状态文字均在此基础上挂子类"
|
||
},
|
||
{
|
||
"name": "kole-upload-del",
|
||
"type": "class",
|
||
"desc": "删除按钮类名，点击后从 files 中移除该行"
|
||
},
|
||
{
|
||
"name": "is-over",
|
||
"type": "state class",
|
||
"desc": "拖拽悬停态：:class=\"{ 'is-over': over }\"，可用于高亮投放区"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"拖拽区是 div + @click，没有 role、tabindex 与键盘处理，纯键盘用户完全无法选择文件；建议由业务在其上叠加真实 button（DragUpload.vue3.vue:3）。",
|
||
"隐藏的 file input 用 style=\"display:none\" 且无 label，读屏与键盘都访问不到；进度条只有数字百分比，没有 role=\"progressbar\"（DragUpload.vue3.vue:7）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/DragUpload.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "dragupload 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/DragUpload.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"dragupload-ex-1"
|
||
],
|
||
"notes": [
|
||
"frameworks/DragUpload.vue3.vue:25 — 组件内部维护文件列表，无外部入参",
|
||
"frameworks/DragUpload.vue3.vue:29 — 统一入口：生成 id、按类型生成缩略图、推入 files",
|
||
"frameworks/DragUpload.vue3.vue:42 — 原生 change 后清空 input 值以便重选同一文件"
|
||
]
|
||
}
|