draggable_upload v0.3.5

draggable_upload

描述

基于vue3.0的可拖拽排序、拖拽上传的上传组件

安装

通过 npm 或者 yarn 安装

yarn add draggable_upload
//or
npm i draggable_upload

浏览器直接引入

    <script src="https://unpkg.com/vue@next"></script>
    <script src="path/draggableUpload.umd.min.js"></script>

属性

事件

插槽

example demo

使用

 <draggableUpload
      :limit="4"
      draggable
      multiple="multiple"
      accept=".jpg,.jpeg,.png"
      :fileList="fileList"
      @fileChange="handleFileChange"
      @removeImg="handleRemoveImg"
      @imgPreview="handleImgPreview"
    >
      <i class="iconfont add-icon icon-jiahao"></i>
    </draggableUpload>

import draggableUpload from "draggable_upload";
interface FileItem {
  status: "loading" | "success" | "error";
  url: string;
  [propName: string]: unknown;
}
interface File {
  name: string;
  type: string;
  [propName: string]: unknown;
}
//....
  setup() {
    const fileList = reactive([
      {
        status: "success",
        url: mockUrl,
      },
    ]);
    const handleFileChange = (file: File, fileList: FileItem[]) => {
      console.log("file fileList is", file, fileList);
      let index = fileList.length;
      fileList.push({
        url: "",
        status: "loading",
      });
      setTimeout(() => {
        if (index % 2 == 0) {
          fileList[index].url = "";
          fileList[index].status = "error";
        } else {
          fileList[index].url = mockUrl + Math.random();
          fileList[index].status = "success";
        }
      }, 1000);
    };
    const handleRemoveImg = (
      index: number,
      item: FileItem,
      fileList: FileItem[]
    ) => {
      fileList.splice(index, 1);
    };
    const handleImgPreview = (item: FileItem) => {
      console.log("preview", item.url);
    };
    return {
      fileList,
      handleFileChange,
      handleRemoveImg,
      handleImgPreview,
    };
  }