86 lines
4.6 KiB
JSON
86 lines
4.6 KiB
JSON
{
|
||
"slug": "dragupload",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 dragupload：没有 props 与事件，文件列表与拖拽态都在 data 里，上传进度用定时器模拟。",
|
||
"usage": [
|
||
"这份实现一个 prop 都没声明，所有状态都在 `data() { return { files: [], over: false }; }`（第 26 行），父组件拿不到上传结果。",
|
||
"点击区写的是 `@click=\"$refs.file.click()\"` 加一个 display:none 的原生 file input（第 3、7 行），点选走 onChange、拖放走 onDrop，两条路都汇到 addFiles()。",
|
||
"拖拽态只用 `:class=\"{ 'is-over': over }\"` 表达（第 3 行），dragleave 直接置 false，没有嵌套计数，快速进出会闪。"
|
||
],
|
||
"bestPractices": [
|
||
"addFiles() 里对每份文件用 setInterval 以每 220ms 随机加 22% 的方式模拟进度（第 45-49 行），这不是真实上传，接入真接口要替换 simulate()。",
|
||
"缩略图只在 /^image\\// 且小于 2MB 时用 FileReader 生成（第 34-38 行），其余类型一律显示「文件」两字。",
|
||
"onChange 处理完会立刻把 e.target.value 清空（第 43 行），所以连续选同一个文件也能再次触发 change。"
|
||
],
|
||
"a11y": [
|
||
"拖拽区是 div 加 @click，没有 tabindex 与 keydown，键盘用户无法触发选文件，需要外部再放一个真实按钮。",
|
||
"隐藏的 file input 带 multiple，但缺少 label 关联，屏幕阅读器只能读到「文件」两字，无法说明用途。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体是模板引用的类名与内部 data（files/over，frameworks/DragUpload.vue2.vue:26）：实现不声明 props、不抛事件、不开插槽，对外没有可传参的 API。",
|
||
"table": [
|
||
{
|
||
"name": "kole-upload",
|
||
"type": "类名（内部状态驱动）",
|
||
"desc": "该端不对外暴露 props：这个类名由组件内部状态切换，使用方只需给容器加组件自身的类名（frameworks/DragUpload.vue2.vue:2）。"
|
||
},
|
||
{
|
||
"name": "kole-upload-bar",
|
||
"type": "类名（内部状态驱动）",
|
||
"desc": "该端不对外暴露 props：这个类名由组件内部状态切换，使用方只需给容器加组件自身的类名（frameworks/DragUpload.vue2.vue:13）。"
|
||
},
|
||
{
|
||
"name": "kole-upload-del",
|
||
"type": "类名（内部状态驱动）",
|
||
"desc": "该端不对外暴露 props：这个类名由组件内部状态切换，使用方只需给容器加组件自身的类名（frameworks/DragUpload.vue2.vue:16）。"
|
||
},
|
||
{
|
||
"name": "kole-upload-drop",
|
||
"type": "类名（内部状态驱动）",
|
||
"desc": "该端不对外暴露 props：这个类名由组件内部状态切换，使用方只需给容器加组件自身的类名（frameworks/DragUpload.vue2.vue:3）。"
|
||
},
|
||
{
|
||
"name": "kole-upload-hint",
|
||
"type": "类名（内部状态驱动）",
|
||
"desc": "该端不对外暴露 props：这个类名由组件内部状态切换，使用方只需给容器加组件自身的类名（frameworks/DragUpload.vue2.vue:5）。"
|
||
},
|
||
{
|
||
"name": "kole-upload-icon",
|
||
"type": "类名（内部状态驱动）",
|
||
"desc": "该端不对外暴露 props：这个类名由组件内部状态切换，使用方只需给容器加组件自身的类名（frameworks/DragUpload.vue2.vue:4）。"
|
||
},
|
||
{
|
||
"name": "kole-upload-item",
|
||
"type": "类名（内部状态驱动）",
|
||
"desc": "该端不对外暴露 props：这个类名由组件内部状态切换，使用方只需给容器加组件自身的类名（frameworks/DragUpload.vue2.vue:9）。"
|
||
},
|
||
{
|
||
"name": "kole-upload-list",
|
||
"type": "类名（内部状态驱动）",
|
||
"desc": "该端不对外暴露 props：这个类名由组件内部状态切换，使用方只需给容器加组件自身的类名（frameworks/DragUpload.vue2.vue:8）。"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/DragUpload.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/DragUpload.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"dragupload-ex-1"
|
||
],
|
||
"notes": [
|
||
"无 props 块：frameworks/DragUpload.vue2.vue:25 起直接是 data()，methods 在第 28-52 行。",
|
||
"交互入口在模板第 3 行（点击/拖拽）与第 7 行（隐藏 file input），两条路都汇到 addFiles()。"
|
||
]
|
||
}
|