aurora-admin/site/examples/dragupload.json

{
 "slug": "dragupload",
 "mode": "single",
 "curated": true,
 "examples": [
  {
   "id": "dragupload-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"kole-page\">\n  <h2 class=\"kole-h2\">DragUpload 拖拽上传</h2>\n  <p class=\"kole-desc\">支持点击或拖拽文件上传，显示进度与缩略图，可删除。</p>\n  <div class=\"kole-demo\">\n    <div class=\"kole-upload\" id=\"upload\" role=\"button\" tabindex=\"0\">\n      <div class=\"kole-upload-drop\" id=\"drop\" role=\"button\" tabindex=\"0\">\n        <span class=\"kole-upload-icon\">⬆️</span>\n        <div class=\"kole-upload-hint\">\n          将文件拖到此处，或\n          <b>点击选择</b>\n        </div>\n      </div>\n      <input id=\"file\" type=\"file\" style=\"display:none\" multiple />\n      <div class=\"kole-upload-list\" id=\"list\" role=\"button\" tabindex=\"0\"></div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<h2>DragUpload 拖拽上传</h2>\n<p>支持点击或拖拽文件上传，显示进度与缩略图，可删除。</p>\n<div class=\"kole-upload\" id=\"upload\" role=\"button\" tabindex=\"0\">\n  <div class=\"kole-upload-drop\" role=\"button\" tabindex=\"0\">\n    <span class=\"kole-upload-icon\">⬆️</span>\n    <div class=\"kole-upload-hint\">\n      将文件拖到此处，或\n      <b>点击选择</b>\n    </div>\n  </div>\n  <input type=\"file\" style=\"display:none\" multiple />\n  <div class=\"kole-upload-list\" role=\"button\" tabindex=\"0\"></div>\n</div>",
    "jsx": "import { KoleDragUpload } from 'kole-ui/react';\n\n<KoleDragUpload>\n  <div className=\"kole-upload-drop\">\n    <span className=\"kole-upload-icon\">⬆️</span>\n    <div className=\"kole-upload-hint\">将文件拖到此处，或 <b>点击选择</b></div>\n  </div>\n  <div className=\"kole-upload-list\">\n    <div className=\"kole-upload-item\">\n      <div className=\"kole-upload-thumb\">文件</div>\n      <div className=\"kole-upload-meta\">\n        <div className=\"kole-upload-name\">合同扫描件.pdf</div>\n        <div className=\"kole-upload-bar\"><i style={{ width: '100%' }} /></div>\n      </div>\n      <div className=\"kole-upload-status\">已完成</div>\n      <button className=\"kole-upload-del\">×</button>\n    </div>\n  </div>\n</KoleDragUpload>",
    "vue3": "<template>\n  <KoleDragUpload>\n    <div class=\"kole-upload-drop\">\n      <span class=\"kole-upload-icon\">⬆️</span>\n      <div class=\"kole-upload-hint\">将文件拖到此处，或 <b>点击选择</b></div>\n    </div>\n    <div class=\"kole-upload-list\">\n      <div class=\"kole-upload-item\">\n        <div class=\"kole-upload-thumb\">文件</div>\n        <div class=\"kole-upload-meta\">\n          <div class=\"kole-upload-name\">合同扫描件.pdf</div>\n          <div class=\"kole-upload-bar\"><i style=\"width:100%\"></i></div>\n        </div>\n        <div class=\"kole-upload-status\">已完成</div>\n        <button class=\"kole-upload-del\">×</button>\n      </div>\n    </div>\n  </KoleDragUpload>\n</template>\n\n<script setup>\nimport { KoleDragUpload } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <KoleDragUpload>\n    <div class=\"kole-upload-drop\">\n      <span class=\"kole-upload-icon\">⬆️</span>\n      <div class=\"kole-upload-hint\">将文件拖到此处，或 <b>点击选择</b></div>\n    </div>\n    <div class=\"kole-upload-list\">\n      <div class=\"kole-upload-item\">\n        <div class=\"kole-upload-thumb\">文件</div>\n        <div class=\"kole-upload-meta\">\n          <div class=\"kole-upload-name\">合同扫描件.pdf</div>\n          <div class=\"kole-upload-bar\"><i style=\"width:100%\"></i></div>\n        </div>\n        <div class=\"kole-upload-status\">已完成</div>\n        <button class=\"kole-upload-del\">×</button>\n      </div>\n    </div>\n  </KoleDragUpload>\n</template>\n\n<script>\nimport { KoleDragUpload } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleDragUpload },\n};\n</script>",
    "tsx": "import { KoleDragUpload } from 'kole-ui/react';\n\nexport default function KoleDragUploadDemo(): JSX.Element {\n  return (\n    <KoleDragUpload>\n      <div className=\"kole-upload-drop\">\n        <span className=\"kole-upload-icon\">⬆️</span>\n        <div className=\"kole-upload-hint\">将文件拖到此处，或 <b>点击选择</b></div>\n      </div>\n      <div className=\"kole-upload-list\">\n        <div className=\"kole-upload-item\">\n          <div className=\"kole-upload-thumb\">文件</div>\n          <div className=\"kole-upload-meta\">\n            <div className=\"kole-upload-name\">合同扫描件.pdf</div>\n            <div className=\"kole-upload-bar\"><i style={{ width: '100%' }} /></div>\n          </div>\n          <div className=\"kole-upload-status\">已完成</div>\n          <button className=\"kole-upload-del\">×</button>\n        </div>\n      </div>\n    </KoleDragUpload>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleDragUpload>\n    <div class=\"kole-upload-drop\">\n      <span class=\"kole-upload-icon\">⬆️</span>\n      <div class=\"kole-upload-hint\">将文件拖到此处，或 <b>点击选择</b></div>\n    </div>\n    <div class=\"kole-upload-list\">\n      <div class=\"kole-upload-item\">\n        <div class=\"kole-upload-thumb\">文件</div>\n        <div class=\"kole-upload-meta\">\n          <div class=\"kole-upload-name\">合同扫描件.pdf</div>\n          <div class=\"kole-upload-bar\"><i style=\"width:100%\"></i></div>\n        </div>\n        <div class=\"kole-upload-status\">已完成</div>\n        <button class=\"kole-upload-del\">×</button>\n      </div>\n    </div>\n  </KoleDragUpload>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleDragUpload } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('基础用法');\n\n</script>",
    "vue2ts": "<template>\n\n  <KoleDragUpload>\n    <div class=\"kole-upload-drop\">\n      <span class=\"kole-upload-icon\">⬆️</span>\n      <div class=\"kole-upload-hint\">将文件拖到此处，或 <b>点击选择</b></div>\n    </div>\n    <div class=\"kole-upload-list\">\n      <div class=\"kole-upload-item\">\n        <div class=\"kole-upload-thumb\">文件</div>\n        <div class=\"kole-upload-meta\">\n          <div class=\"kole-upload-name\">合同扫描件.pdf</div>\n          <div class=\"kole-upload-bar\"><i style=\"width:100%\"></i></div>\n        </div>\n        <div class=\"kole-upload-status\">已完成</div>\n        <button class=\"kole-upload-del\">×</button>\n      </div>\n    </div>\n  </KoleDragUpload>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleDragUpload } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleDragUpload },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/DragUpload.html:17-22 的拖拽区（.kole-upload-drop / .kole-upload-icon / .kole-upload-hint）与 :64-77 render() 生成的文件项（thumb/meta/bar/status/del 及「已完成」状态文案）；组件无 props（DragUpload.jsx:4 无参数表），按插槽组合承载同一结构"
   ]
  }
 ]
}