@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/upload/upload.vue

@@ -0,0 +1,887 @@
+<template>
+  <view
+    :style="tools._style([customStyle])"
+    :class="classPrefix + ' ' + tClass"
+  >
+    <t-grid
+      :gutter="gutter"
+      :border="false"
+      align="center"
+      :column="column"
+      :custom-style="draggable ? 'overflow: visible' : ''"
+    >
+      <block v-if="!dragLayout">
+        <t-grid-item
+          v-for="(file, index) in customFiles"
+          :key="index"
+          :t-class="classPrefix + '__grid ' + classPrefix + '__grid-file'"
+          :t-class-content="classPrefix + '__grid-content'"
+          aria-role="presentation"
+        >
+          <view
+            :class="classPrefix + '__wrapper ' + (disabled ? classPrefix + '__wrapper--disabled' : '')"
+            :style="gridItemStyle"
+            :aria-role="ariaRole || getWrapperAriaRole(file)"
+            :aria-label="ariaLabel || getWrapperAriaLabel(file)"
+          >
+            <t-image
+              v-if="file.type !== 'video'"
+              :data-file="file"
+              :data-index="index"
+              :t-class="classPrefix + '__thumbnail'"
+              :custom-style="(imageProps && imageProps.style) || ''"
+              :src="file.thumb || file.url"
+              :mode="(imageProps && imageProps.mode) || 'aspectFill'"
+              :error="(imageProps && imageProps.error) || 'default'"
+              :lazy="(imageProps && imageProps.lazy) || false"
+              :loading="(imageProps && imageProps.loading) || 'default'"
+              :shape="(imageProps && imageProps.shape) || 'round'"
+              :webp="(imageProps && imageProps.webp) || false"
+              :show-menu-by-longpress="(imageProps && imageProps.showMenuByLongpress) || false"
+              @click="onPreview($event, { file, index })"
+            />
+            <video
+              v-if="file.type === 'video'"
+              :class="classPrefix + '__thumbnail'"
+              :src="file.url"
+              :poster="file.thumb"
+              controls
+              :autoplay="false"
+              objectFit="contain"
+              :data-file="file"
+              @click.stop="onFileClick"
+            />
+            <view
+              v-if="file.status && file.status != 'done'"
+              :class="classPrefix + '__progress-mask'"
+              :data-index="index"
+              :data-file="file"
+              @click.stop="onFileClick"
+            >
+              <block v-if="file.status == 'loading'">
+                <t-icon
+                  :t-class="classPrefix + '__progress-loading'"
+                  name="loading"
+                  size="48rpx"
+                  aria-hidden
+                />
+                <view :class="classPrefix + '__progress-text'">
+                  {{ file.percent ? file.percent + '%' : '上传中...' }}
+                </view>
+              </block>
+              <t-icon
+                v-else
+                :name="file.status == 'reload' ? 'refresh' : 'close-circle'"
+                size="48rpx"
+                aria-hidden
+              />
+              <view
+                v-if="file.status == 'reload' || file.status == 'failed'"
+                :class="classPrefix + '__progress-text'"
+              >
+                {{ file.status == 'reload' ? '重新上传' : '上传失败' }}
+              </view>
+            </view>
+            <view
+              v-if="tools.isBoolean(file.removeBtn) ? file.removeBtn : removeBtn"
+              :class="classPrefix + '__close-btn hotspot-expanded'"
+              :data-index="index"
+              aria-role="button"
+              aria-label="删除"
+              @click.stop="onDelete"
+            >
+              <t-icon
+                name="close"
+                size="32rpx"
+                color="#fff"
+              />
+            </view>
+          </view>
+        </t-grid-item>
+        <t-grid-item
+          v-if="addBtn && customLimit > 0"
+          :t-class="classPrefix + '__grid'"
+          :t-class-content="classPrefix + '__grid-content'"
+          aria-label="上传"
+          @click="onAddTap"
+        >
+          <view
+            :class="classPrefix + '__wrapper'"
+            :style="gridItemStyle"
+          >
+            <slot name="add-content" />
+            <block v-if="addContent">
+              {{ addContent }}
+            </block>
+            <view
+              v-else
+              :class="classPrefix + '__add-icon ' + (disabled ? classPrefix + '__add-icon--disabled' : '')"
+            >
+              <t-icon name="add" />
+            </view>
+          </view>
+        </t-grid-item>
+      </block>
+      <block v-else>
+        <view
+          :class="classPrefix + '__drag'"
+          :list="dragList"
+          :style="dragWrapStyle + ';'"
+          :drag-base-data="dragBaseData"
+        >
+          <view
+            v-for="(file, index) in customFiles"
+            :key="index"
+            :ref="classPrefix + '__drag-item'"
+            :class="getDragItemClass(index)"
+            :style="getDragItemStyle(index)"
+            :data-index="index"
+            @longpress="parseEventDynamicCode($event, 'longPress', index)"
+            @touchmove.stop.prevent="parseEventDynamicCode($event, dragging ? 'touchMove' : '', index)"
+            @touchend.stop.prevent="parseEventDynamicCode($event, dragging ? 'touchEnd' : '', index)"
+          >
+            <t-grid-item
+              :t-class="classPrefix + '__grid ' + classPrefix + '__grid-file'"
+              :t-class-content="classPrefix + '__grid-content'"
+              aria-role="presentation"
+              custom-style="width: 100%"
+            >
+              <view
+                :class="classPrefix + '__wrapper ' + (disabled ? classPrefix + '__wrapper--disabled' : '')"
+                :style="gridItemStyle + ';'"
+                :aria-role="ariaRole || getWrapperAriaRole(file)"
+                :aria-label="ariaLabel || getWrapperAriaLabel(file)"
+              >
+                <t-image
+                  v-if="file.type !== 'video'"
+                  :data-file="file"
+                  :data-index="index"
+                  :t-class="classPrefix + '__thumbnail'"
+                  :custom-style="(imageProps && imageProps.style) || ''"
+                  :src="file.thumb || file.url"
+                  :mode="(imageProps && imageProps.mode) || 'aspectFill'"
+                  :error="(imageProps && imageProps.error) || 'default'"
+                  :lazy="(imageProps && imageProps.lazy) || false"
+                  :loading="(imageProps && imageProps.loading) || 'default'"
+                  :shape="(imageProps && imageProps.shape) || 'round'"
+                  :webp="(imageProps && imageProps.webp) || false"
+                  :show-menu-by-longpress="(imageProps && imageProps.showMenuByLongpress) || false"
+                  @click="onPreview($event, { file, index })"
+                />
+                <video
+                  v-if="file.type === 'video'"
+                  :class="classPrefix + '__thumbnail'"
+                  :src="file.url"
+                  :poster="file.thumb"
+                  controls
+                  :autoplay="false"
+                  objectFit="contain"
+                  :data-file="file"
+                  @click.stop="onFileClick"
+                />
+                <view
+                  v-if="file.status && file.status != 'done'"
+                  :class="classPrefix + '__progress-mask'"
+                  :data-index="index"
+                  :data-file="file"
+                  @click.stop="onFileClick"
+                >
+                  <block v-if="file.status == 'loading'">
+                    <t-icon
+                      :t-class="classPrefix + '__progress-loading'"
+                      name="loading"
+                      size="48rpx"
+                      aria-hidden
+                    />
+                    <view :class="classPrefix + '__progress-text'">
+                      {{ file.percent ? file.percent + '%' : '上传中...' }}
+                    </view>
+                  </block>
+                  <t-icon
+                    v-else
+                    :name="file.status == 'reload' ? 'refresh' : 'close-circle'"
+                    size="48rpx"
+                    aria-hidden
+                  />
+                  <view
+                    v-if="file.status == 'reload' || file.status == 'failed'"
+                    :class="classPrefix + '__progress-text'"
+                  >
+                    {{ file.status == 'reload' ? '重新上传' : '上传失败' }}
+                  </view>
+                </view>
+                <view
+                  v-if="tools.isBoolean(file.removeBtn) ? file.removeBtn : removeBtn"
+                  :class="classPrefix + '__close-btn hotspot-expanded'"
+                  :data-index="index"
+                  :data-url="file.url"
+                  aria-role="button"
+                  aria-label="删除"
+                  @click.stop="onDelete"
+                >
+                  <t-icon
+                    name="close"
+                    size="32rpx"
+                    color="#fff"
+                  />
+                </view>
+              </view>
+            </t-grid-item>
+          </view>
+          <view
+            v-if="addBtn && customLimit > 0"
+            :ref="classPrefix + '__drag-item'"
+            :class="getDragItemClass(customFiles.length)"
+            :style="getDragItemStyle(customFiles.length)"
+          >
+            <t-grid-item
+              :t-class="classPrefix + '__grid'"
+              :t-class-content="classPrefix + '__grid-content'"
+              aria-label="上传"
+              custom-style="width: 100%"
+              @click="onAddTap"
+            >
+              <view
+                :class="classPrefix + '__wrapper'"
+                :style="gridItemStyle"
+              >
+                <slot name="add-content" />
+                <block v-if="addContent">
+                  {{ addContent }}
+                </block>
+                <view
+                  v-else
+                  :class="classPrefix + '__add-icon ' + (disabled ? classPrefix + '__add-icon--disabled' : '')"
+                >
+                  <t-icon name="add" />
+                </view>
+              </view>
+            </t-grid-item>
+          </view>
+        </view>
+      </block>
+    </t-grid>
+  </view>
+</template>
+<script>
+import TGrid from '../grid/grid';
+import TGridItem from '../grid-item/grid-item';
+import TIcon from '../icon/icon';
+import TImage from '../image/image';
+import { uniComponent } from '../common/src/index';
+import props from './props';
+import { prefix } from '../common/config';
+import { isOverSize, coalesce, isWxWork, isPC } from '../common/utils';
+import { isObject } from '../common/validator';
+import tools from '../common/utils.wxs';
+import {
+  getWrapperAriaRole,
+  getWrapperAriaLabel,
+} from './upload.computed.js';
+import {
+  longPress,
+  touchMove,
+  touchEnd,
+  baseDataObserver,
+  listObserver,
+} from './drag.computed.js';
+import { parseEventDynamicCode } from '../common/event/dynamic';
+
+
+const name = `${prefix}-upload`;
+
+const makeMethods = () => [
+  [longPress, 'longPress'],
+  [touchMove, 'touchMove'],
+  [touchEnd, 'touchEnd'],
+  [baseDataObserver, 'baseDataObserver'],
+  [listObserver, 'listObserver'],
+].reduce((acc, item) => {
+  const func = item[0];
+  return {
+    ...acc,
+    [item[1]](...args) {
+      func.call(this, ...args);
+    },
+  };
+}, {});
+
+
+export default uniComponent({
+  name,
+  options: {
+    styleIsolation: 'shared',
+  },
+  controlledProps: [
+    {
+      key: 'files',
+      event: 'success',
+    },
+  ],
+  externalClasses: [`${prefix}-class`],
+  components: {
+    TGrid,
+    TGridItem,
+    TIcon,
+    TImage,
+  },
+  props: {
+    ...props,
+  },
+  data() {
+    return {
+      classPrefix: name,
+      prefix,
+      current: false,
+      proofs: [],
+      customFiles: [], // 内部动态修改的files
+      customLimit: 0, // 内部动态修改的limit
+      column: 4,
+      dragBaseData: {}, // 拖拽所需要页面数据
+      rows: 0, // 行数
+      dragWrapStyle: '', // 拖拽容器的样式
+      dragList: [], // 拖拽的数据列
+      dragging: true, // 是否开始拖拽
+      dragLayout: false, // 是否开启拖拽布局
+      tools,
+
+      gridItemStyle: '',
+
+      fakeState: {},
+
+      dragItemClassList: [],
+      dragItemStyleList: [],
+    };
+  },
+  watch: {
+    files: {
+      handler() {
+        this.onWatchFilesLimit();
+      },
+      deep: true,
+    },
+    max: 'onWatchFilesLimit',
+    draggable: {
+      handler() {
+        this.onWatchFilesLimit();
+      },
+      deep: true,
+    },
+
+    gridConfig: {
+      handler() {
+        this.updateGrid();
+      },
+      deep: true,
+    },
+    dragList: {
+      handler(val) {
+        setTimeout(() => {
+          this.listObserver(val);
+        }, 33);
+      },
+      deep: true,
+      immediate: true,
+    },
+    dragBaseData: {
+      handler(val) {
+        this.baseDataObserver(val);
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {
+    this.handleLimit(this.files, this.max);
+    this.updateGrid();
+  },
+  methods: {
+    getWrapperAriaRole,
+    getWrapperAriaLabel,
+
+    ...makeMethods(),
+
+    handleLimit(customFiles, max) {
+      if (max === 0) {
+        max = Number.MAX_SAFE_INTEGER;
+      }
+      this.customFiles = customFiles.length > max ? customFiles.slice(0, max) : customFiles;
+      this.customLimit = max - customFiles.length;
+      this.dragging = true;
+
+      this.initDragLayout();
+    },
+
+    triggerSuccessEvent(files) {
+      this._trigger('success', { files: [...this.customFiles, ...files] });
+    },
+
+    triggerFailEvent(err) {
+      this.$emit('fail', err);
+    },
+
+    onFileClick(e) {
+      const { file, index } = e.currentTarget.dataset;
+      this.$emit('click', { index, file });
+    },
+
+    /**
+   * 由于小程序暂时在ios上不支持返回上传文件的fileType，这里用文件的后缀来判断
+   * @param mediaType
+   * @param tempFilePath
+   * @returns string
+   * @link https://developers.weixin.qq.com/community/develop/doc/00042820b28ee8fb41fc4d0c254c00
+   */
+    getFileType(mediaType, tempFilePath, fileType) {
+      if (fileType) return fileType; // 如果有返回fileType就直接用
+      if (mediaType.length === 1) {
+      // 在单选媒体类型的时候直接使用单选媒体类型
+        return mediaType[0];
+      }
+      // 否则根据文件后缀进行判读
+      const videoType = ['avi', 'wmv', 'mkv', 'mp4', 'mov', 'rm', '3gp', 'flv', 'mpg', 'rmvb'];
+      const temp = tempFilePath.split('.');
+      const postfix = temp[temp.length - 1];
+      if (videoType.includes(postfix.toLocaleLowerCase())) {
+        return 'video';
+      }
+      return 'image';
+    },
+
+    // 选中文件之后，计算一个随机的短文件名
+    getRandFileName(filePath) {
+      const extIndex = filePath.lastIndexOf('.');
+      const extName = extIndex === -1 ? '' : filePath.substr(extIndex);
+      return parseInt(`${Date.now()}${Math.floor(Math.random() * 900 + 100)}`, 10).toString(36) + extName;
+    },
+
+    checkFileSize(size, sizeLimit, fileType) {
+      if (isOverSize(size, sizeLimit)) {
+        let title = `${fileType === 'video' ? '视频' : '图片'}大小超过限制`;
+
+        if (isObject(sizeLimit)) {
+          const { size: limitSize, message: limitMessage } = sizeLimit;
+          title = limitMessage?.replace('{sizeLimit}', String(limitSize));
+        }
+        uni.showToast({ icon: 'none', title });
+        return true;
+      }
+      return false;
+    },
+
+    onDelete(e) {
+      const { index } = e.currentTarget.dataset;
+      this.deleteHandle(index);
+    },
+
+    deleteHandle(index) {
+      const { customFiles } = this;
+      const delFile = customFiles[index];
+      this.$emit('remove', { index, file: delFile });
+    },
+
+    updateGrid() {
+      let { gridConfig = {} } = this;
+      if (!isObject(gridConfig)) gridConfig = {};
+      const { column = 4, width = 160, height = 160 } = gridConfig;
+
+      this.gridItemStyle = `width:${width}rpx;height:${height}rpx`;
+      this.column = column;
+    },
+
+    resetDragLayout() {
+      this.dragBaseData = {};
+      this.dragWrapStyle = '';
+      this.dragLayout = false;
+    },
+
+    initDragLayout() {
+      const { draggable, disabled, customFiles } = this;
+      if (!draggable || disabled || customFiles.length === 0) {
+        this.resetDragLayout();
+        return;
+      }
+      this.initDragList();
+      setTimeout(() => {
+        this.initDragBaseData();
+      }, 33)
+      ;
+    },
+
+    initDragList() {
+      let i = 0;
+      const { column, customFiles, customLimit } = this;
+      const dragList = [];
+      customFiles.forEach((item, index) => {
+        dragList.push({
+          realKey: i, // 真实顺序
+          sortKey: index, // 整体顺序
+          tranX: `${(index % column) * 100}%`,
+          tranY: `${Math.floor(index / column) * 100}%`,
+          data: { ...item },
+        });
+        i += 1;
+      });
+      if (customLimit > 0) {
+        const listLength = dragList.length;
+        dragList.push({
+          realKey: listLength, // 真实顺序
+          sortKey: listLength, // 整体顺序
+          tranX: `${(listLength % column) * 100}%`,
+          tranY: `${Math.floor(listLength / column) * 100}%`,
+          fixed: true,
+        });
+      }
+      this.rows = Math.ceil(dragList.length / column);
+
+      this.dragList = dragList;
+    },
+
+    initDragBaseData() {
+      const { classPrefix, rows, column } = this;
+
+      let query;
+      // #ifdef H5 || APP-PLUS
+      query = uni.createSelectorQuery().in(this);
+      // #endif
+      if (!query) {
+        query = this.createSelectorQuery();
+      }
+
+
+      let selectorGridItem;
+      let selectorGrid;
+      // #ifdef H5 || APP-PLUS
+      selectorGridItem = '.t-grid-item';
+      selectorGrid = '.t-grid';
+      // #endif
+
+      if (!selectorGridItem) {
+        selectorGridItem = `.${classPrefix} >>> .t-grid-item`;
+        selectorGrid = `.${classPrefix} >>> .t-grid`;
+      }
+
+      query.select(selectorGridItem).boundingClientRect();
+      query.select(selectorGrid).boundingClientRect();
+      query.selectViewport().scrollOffset();
+      query.exec((res) => {
+        const [{ width, height }, { left, top }, { scrollTop }] = res;
+        const dragBaseData = {
+          rows,
+          classPrefix,
+          itemWidth: width,
+          itemHeight: height,
+          wrapLeft: left,
+          wrapTop: top + scrollTop,
+          columns: column,
+        };
+        const dragWrapStyle = `height: ${rows * height}px`;
+
+        this.dragBaseData = dragBaseData;
+        this.dragWrapStyle = dragWrapStyle;
+        this.dragLayout = true;
+
+
+        // 为了给拖拽元素加上拖拽方法，同时控制不拖拽时不取消穿透
+        const timer = setTimeout(() => {
+          this.dragging = false;
+          clearTimeout(timer);
+        }, 0);
+      });
+    },
+
+    getPreviewMediaSources() {
+      const previewMediaSources = [];
+      this.customFiles.forEach((ele) => {
+        const mediaSource = {
+          url: ele.url,
+          type: ele.type,
+          poster: ele.thumb || undefined,
+        };
+        previewMediaSources.push(mediaSource);
+      });
+
+      return previewMediaSources;
+    },
+
+    onPreview(e) {
+      this.onFileClick(e);
+      const { preview } = this;
+
+      if (!preview) return;
+
+      const usePreviewMedia = this.customFiles.some(file => file.type === 'video');
+      if (usePreviewMedia) {
+        this.onPreviewMedia(e);
+      } else {
+        this.onPreviewImage(e);
+      }
+    },
+
+    onPreviewImage(e) {
+      const { index } = e.currentTarget.dataset;
+      const urls = this.customFiles.filter(file => file.percent !== -1).map(file => file.url);
+      const current = this.customFiles[index]?.url;
+      uni.previewImage({
+        urls,
+        current,
+        fail() {
+          uni.showToast({ title: '预览图片失败', icon: 'none' });
+        },
+      });
+    },
+
+    onPreviewMedia(e) {
+      const { index: current } = e.currentTarget.dataset;
+      const sources = this.getPreviewMediaSources();
+      uni.previewMedia({
+        sources,
+        current,
+        fail() {
+          uni.showToast({ title: '预览视频失败', icon: 'none' });
+        },
+      });
+    },
+
+    uploadFiles(files) {
+      return Promise.resolve().then(() => {
+        // 开始调用上传函数
+        const task = this.data.requestMethod(files);
+        if (task instanceof Promise) {
+          return task;
+        }
+        return Promise.resolve({});
+      });
+    },
+
+    startUpload(files) {
+      // 如果传入了上传函数，则进度设为0并开始上传，否则跳过上传
+      if (typeof this.requestMethod === 'function') {
+        return this.uploadFiles(files)
+          .then(() => {
+            files.forEach((file) => {
+              file.percent = 100;
+            });
+            this.triggerSuccessEvent(files);
+          })
+          .catch((err) => {
+            this.triggerFailEvent(err);
+          });
+      }
+
+      // 如果没有上传函数，success事件与微信api上传成功关联
+      this.triggerSuccessEvent(files);
+
+      this.handleLimit(this.customFiles, this.max);
+      return Promise.resolve();
+    },
+
+    onWatchFilesLimit() {
+      this.handleLimit(this.files, this.max);
+    },
+
+    onAddTap() {
+      const { disabled, mediaType, source } = this;
+      if (disabled) return;
+      if (source === 'media') {
+        this.chooseMedia(mediaType);
+      } else {
+        this.chooseMessageFile(mediaType);
+      }
+    },
+
+    chooseMedia(mediaType) {
+      const { customLimit } = this;
+      const { config, sizeLimit } = this;
+      let func = 'chooseMedia';
+      // #ifdef H5 || MP-ALIPAY
+      func = 'chooseImage';
+      // #endif
+      // #ifdef MP-WEIXIN
+      if (isPC || isWxWork) {
+        func = 'chooseImage';
+      }
+      // #endif
+      uni[func]({
+        count: Math.min(20, customLimit),
+        mediaType,
+        ...config,
+        success: (res) => {
+          const files = [];
+
+          // 支持单/多文件
+          res.tempFiles.forEach((temp) => {
+            const { size, fileType, tempFilePath, width, height, duration, thumbTempFilePath, ...res } = temp;
+
+            if (this.checkFileSize(size, sizeLimit, fileType)) return;
+
+
+            const name = temp.name || this.getRandFileName(tempFilePath);
+            files.push({
+              name,
+              type: this.getFileType(mediaType, temp.name || tempFilePath, fileType),
+              url: tempFilePath,
+              size,
+              width,
+              height,
+              duration,
+              thumb: thumbTempFilePath,
+              percent: 0,
+              ...res,
+            });
+          });
+          this.afterSelect(files);
+        },
+        fail: (err) => {
+          this.triggerFailEvent(err);
+        },
+        complete: (res) => {
+          this.$emit('complete', res);
+        },
+      });
+    },
+
+    chooseMessageFile(mediaType) {
+      const { customLimit } = this;
+      const { config, sizeLimit } = this;
+      uni.chooseMessageFile({
+        count: Math.min(100, customLimit),
+        type: Array.isArray(mediaType) ? 'all' : mediaType,
+        ...config,
+        success: (res) => {
+          const files = [];
+
+          // 支持单/多文件
+          res.tempFiles.forEach((temp) => {
+            const { size, type: fileType, path: tempFilePath, ...res } = temp;
+
+            if (this.checkFileSize(size, sizeLimit, fileType)) return;
+
+            const name = this.getRandFileName(tempFilePath);
+            files.push({
+              name,
+              type: this.getFileType(mediaType, tempFilePath, fileType),
+              url: tempFilePath,
+              size,
+              percent: 0,
+              ...res,
+            });
+          });
+          this.afterSelect(files);
+        },
+        fail: err => this.triggerFailEvent(err),
+        complete: res => this.$emit('complete', res),
+      });
+    },
+
+    afterSelect(files) {
+      this._trigger('select-change', {
+        files: [...this.customFiles],
+        currentSelectedFiles: [files],
+      });
+      this._trigger('add', { files });
+      this.startUpload(files);
+    },
+
+    dragVibrate(e) {
+      const { vibrateType } = e;
+      const { draggable } = this;
+      const dragVibrate = coalesce(draggable?.vibrate, true);
+      const dragCollisionVibrate = draggable?.collisionVibrate;
+      if ((dragVibrate && vibrateType === 'longPress') || (dragCollisionVibrate && vibrateType === 'touchMove')) {
+        uni.vibrateShort({
+          type: 'light',
+        });
+      }
+    },
+
+    dragStatusChange(e) {
+      const { dragging } = e;
+      this.dragging = dragging;
+    },
+
+    dragEnd(e) {
+      const { dragCollisionList } = e;
+      let files = [];
+      if (dragCollisionList.length === 0) {
+        files = this.customFiles;
+      } else {
+        files = dragCollisionList.reduce((list, item) => {
+          const { realKey, data, fixed } = item;
+          if (!fixed) {
+            list[realKey] = {
+              ...data,
+            };
+          }
+          return list;
+        }, []);
+      }
+      this.triggerDropEvent(files);
+    },
+
+    triggerDropEvent(files) {
+      const { transition } = this;
+      if (transition.backTransition) {
+        const timer = setTimeout(() => {
+          this.$emit('drop', { files });
+          clearTimeout(timer);
+        }, transition.duration);
+      } else {
+        this.$emit('drop', { files });
+      }
+    },
+    getState() {
+      return this.fakeState || {};
+    },
+    callMethod(...args) {
+      return this[args[0]]?.(...args.slice(1));
+    },
+    parseEventDynamicCode,
+    setDragItemClass(index, operation, val) {
+      if (!this.dragItemClassList[index]) {
+        this.dragItemClassList[index] = [];
+      }
+      const valList = Array.isArray(val) ? val : [val];
+      if (operation === 'add') {
+        this.dragItemClassList[index].push(...valList);
+        return;
+      }
+      if (operation === 'remove') {
+        this.dragItemClassList[index] = this.dragItemClassList[index].filter(item => !valList.includes(item));
+      }
+    },
+    getDragItemClass(index) {
+      const { classPrefix } = this;
+      const base = [
+        `${classPrefix}__drag-item`,
+      ];
+      return [
+        ...base,
+        ...(this.dragItemClassList[index] || []),
+      ].join(' ');
+    },
+    setDragItemStyle(index, val) {
+      if (!this.dragItemStyleList[index]) {
+        this.dragItemStyleList[index] = [];
+      }
+      this.dragItemStyleList[index].push(val);
+    },
+    getDragItemStyle(index) {
+      const { column, transition } = this;
+      const base = [
+        `width: ${100 / column}%`,
+        `--td-upload-drag-transition-duration: ${transition.duration}ms`,
+        `--td-upload-drag-transition-timing-function: ${transition.timingFunction}`,
+      ];
+
+      return [
+        ...base,
+        ...(this.dragItemStyleList[index] || []),
+      ].join(';');
+    },
+  },
+});
+</script>
+<style scoped>
+@import './upload.css';
+</style>