ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-upload/upload-list.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"upload-list.mjs","sources":["../../../../../src/components/ivue-upload/upload-list.vue"],"sourcesContent":["<template>\r\n  <ul :class=\"prefixCls\">\r\n    <template v-for=\"(file, index) in files\" :key=\"file.uid\">\r\n      <li :class=\"fileStatusClass(file)\" v-show=\"isImageFile(file)\">\r\n        <!-- 图片 -->\r\n        <div\r\n          :class=\"imageClass(file)\"\r\n          @click=\"handleFileData(file, index)\"\r\n          :style=\"getSizeStyle(file.previewSize || previewSize)\"\r\n        >\r\n          <img\r\n            :src=\"file.content || file.url\"\r\n            :class=\"`${prefixCls}-image__img`\"\r\n            :style=\"imgStyle(file)\"\r\n          />\r\n\r\n          <!-- 自定义预览图片区域内容 -->\r\n          <div :class=\"`${prefixCls}-preview--image`\">\r\n            <slot name=\"preview-image\">\r\n              <!-- 预览图标 -->\r\n              <ivue-icon :class=\"`${prefixCls}-preview-icon`\"\r\n                >visibility</ivue-icon\r\n              >\r\n            </slot>\r\n          </div>\r\n        </div>\r\n        <!-- 蒙层 -->\r\n        <transition name=\"fade\">\r\n          <div :class=\"`${prefixCls}-mask`\" v-if=\"currentStatus(file)\">\r\n            <!-- 加载中 -->\r\n            <div\r\n              :class=\"`${prefixCls}-mask__loading`\"\r\n              v-ivue-loading=\"file.status === 'uploading'\"\r\n              v-if=\"file.status === 'uploading'\"\r\n            ></div>\r\n            <!-- 错误图标 -->\r\n            <template v-if=\"file.status === 'failed'\">\r\n              <ivue-icon :class=\"`${prefixCls}-mask__icon`\" v-if=\"!failedIcon\"\r\n                >cancel</ivue-icon\r\n              >\r\n              <i :class=\"[`${prefixCls}-mask__icon`, failedIcon]\" v-else></i>\r\n            </template>\r\n            <!-- 描述的信息 -->\r\n            <div :class=\"`${prefixCls}-mask__message`\" v-if=\"file.message\">\r\n              {{ file.message }}\r\n            </div>\r\n          </div>\r\n        </transition>\r\n        <!-- 删除按钮 -->\r\n        <ivue-icon\r\n          :class=\"`${prefixCls}-remove`\"\r\n          @click.stop=\"handleRemove(file, index)\"\r\n          v-if=\"isDeletable(file)\"\r\n          >close</ivue-icon\r\n        >\r\n\r\n        <!-- 自定义覆盖在预览区域上方的内容 -->\r\n        <template v-if=\"$slots['preview-cover']\">\r\n          <slot name=\"preview-cover\" :file=\"file\"></slot>\r\n        </template>\r\n      </li>\r\n    </template>\r\n  </ul>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, PropType } from 'vue';\r\nimport IvueLoading from '../ivue-loading/directive';\r\nimport IvueIcon from '../ivue-icon/index.vue';\r\nimport { callInterceptor, Interceptor } from '../../utils/interceptor';\r\nimport { isImageFile, getSizeStyle } from '../../utils/helpers';\r\n\r\n// type\r\nimport { Props, File } from './types/upload-list';\r\n\r\nconst prefixCls = 'ivue-upload-list';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  directives: {\r\n    IvueLoading,\r\n  },\r\n  props: {\r\n    /**\r\n     * 上传的文件的列表\r\n     *\r\n     * @type {Array}\r\n     */\r\n    files: {\r\n      type: Array as PropType<File[]>,\r\n      default: () => [],\r\n    },\r\n    /**\r\n     * 错误时的图标\r\n     *\r\n     * @type {String}\r\n     */\r\n    failedIcon: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    /**\r\n     * 是否展示删除按钮\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    deletable: {\r\n      type: Boolean,\r\n    },\r\n    /**\r\n     * 文件删除前的回调函数，返回 false 可终止文件读取，\r\n     * 支持返回 Promise\r\n     *\r\n     * @type {Function}\r\n     */\r\n    beforeDelete: {\r\n      type: Function as PropType<Interceptor>,\r\n    },\r\n    /**\r\n     * 标识符，可以在回调函数的第二项参数中获取\r\n     *\r\n     * @type {Number, String}\r\n     */\r\n    name: {\r\n      type: [Number, String],\r\n      default: '',\r\n    },\r\n    /**\r\n     * 预览图和上传区域的尺寸，默认单位为 px\r\n     *\r\n     * @type {Number | String}\r\n     */\r\n    previewSize: [Number, String],\r\n    /**\r\n     * 预览图片放大\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    previewFullImage: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    /**\r\n     * 预览图裁剪模式\r\n     *\r\n     * @type {String}\r\n     */\r\n    imageFit: {\r\n      type: String,\r\n      default: 'cover',\r\n    },\r\n  },\r\n  setup(props: Props, { emit }) {\r\n    // methods\r\n\r\n    // 文件上传状态\r\n    const imageClass = (file: File) => {\r\n      return [\r\n        `${prefixCls}-image`,\r\n        {\r\n          [`${prefixCls}-preview`]:\r\n            props.previewFullImage && !currentStatus(file),\r\n        },\r\n      ];\r\n    };\r\n\r\n    // 有删除\r\n    const isDeletable = (file: File) => {\r\n      // 自定义单个图片预览\r\n      if (typeof file.deletable !== 'undefined') {\r\n        if (file.deletable && file.status !== 'uploading') {\r\n          return true;\r\n        }\r\n      } else if (props.deletable && file.status !== 'uploading') {\r\n        return true;\r\n      }\r\n\r\n      return false;\r\n    };\r\n\r\n    // 文件上传状态\r\n    const fileStatusClass = (file: File) => {\r\n      return [\r\n        `${prefixCls}-status`,\r\n        {\r\n          [`${prefixCls}-status-finish`]: file.status === 'finished',\r\n        },\r\n      ];\r\n    };\r\n\r\n    // 获取当前状态\r\n    const currentStatus = (item: File) => {\r\n      const { status } = item;\r\n\r\n      if (status === 'uploading' || status === 'failed') {\r\n        return true;\r\n      }\r\n\r\n      if (status === 'failed') {\r\n        return true;\r\n      }\r\n\r\n      return false;\r\n    };\r\n\r\n    // 删除按钮\r\n    const handleRemove = (file: File, index: number) => {\r\n      const item = file;\r\n      const { name, beforeDelete } = props;\r\n\r\n      // 拦截器\r\n      callInterceptor({\r\n        // 拦截参数\r\n        interceptor: item.beforeDelete || beforeDelete,\r\n        // 数据\r\n        args: [item, { name, index }],\r\n        done: () => emit('on-delete', file, index),\r\n      });\r\n    };\r\n\r\n    // 返回文件数据\r\n    const handleFileData = (file: File, index: number) => {\r\n      emit('on-preview', file, index);\r\n    };\r\n\r\n    // 图片样式\r\n    const imgStyle = (file: File) => {\r\n      let obj = {};\r\n\r\n      obj = {\r\n        'object-fit': file.imageFit || props.imageFit,\r\n      };\r\n\r\n      return obj;\r\n    };\r\n\r\n    return {\r\n      prefixCls,\r\n\r\n      // methods\r\n      imageClass,\r\n      fileStatusClass,\r\n      currentStatus,\r\n      handleRemove,\r\n      handleFileData,\r\n      isImageFile,\r\n      isDeletable,\r\n      imgStyle,\r\n      getSizeStyle,\r\n    };\r\n  },\r\n  components: {\r\n    IvueIcon,\r\n  },\r\n});\r\n</script>\r\n"],"names":["_resolveDirective","_normalizeClass","_openBlock","_createElementBlock","_Fragment","_renderList","_withDirectives","_createCommentVNode","_createElementVNode","_normalizeStyle","_createVNode","_Transition","_withCtx","_withModifiers","_renderSlot"],"mappings":"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"}