Nine Parsecs from Milwaukee

    draggable_upload
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.5 • Public • Published

    draggable_upload example workflow

    描述

    基于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>
    

    属性

    属性名 类型 默认值 必填 格式 说明
    fileList array - 必填 [{ url:"",status:"success",//...其它自定义属性}] 上传数组 状态值为 loading 、 success 、 error
    limit number 1000 4 图片上传数量限制
    input原生属性 multiple 、accept 等 - - - 除了props其它自定义属性直接作用于input元素上
    uploadClass string - - 上传input 类名
    imgClass string - - 图片类名
    draggable boolean false - 拖拽上传

    事件

    事件名 参数 说明
    fileChange file,fileList 选取文件回调
    removeImg index,item,fileList 移除图片回调
    imgPreview item 预览图片回调

    插槽

    命名插槽 命名 插槽prop
    默认插槽 default -
    预览插槽 previewIcon item
    删除插槽 deleteIcon index, item, fileList
    加载状态插槽 progress item
    成功状态插槽 successIcon item
    失败状态插槽 errorIcon item
    拖拽样式插槽 dragIcon -

    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,
        };
      }
    

    Keywords

    none

    Install

    npm i draggable_upload

    DownloadsWeekly Downloads

    26

    Version

    0.3.5

    License

    none

    Unpacked Size

    2.52 MB

    Total Files

    10

    Last publish

    Collaborators

    • zjjaxx