@fesjs/fes-design/es/input-file/inputFileDragger.js

fes-design for PC

import { defineComponent, createVNode } from 'vue';
import { useTheme } from '../_theme/useTheme';
import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../_util/constants';
import getPrefixCls from '../_util/getPrefixCls';
import Message from '../message';
import { useLocale } from '../config-provider/useLocale';
import { COMPONENT_NAME_DRAGGER } from './const';
import { inputFileDraggerProps } from './props';
import { useInputFile } from './useInputFile';
import { useFileDrop } from './useFileDrop';

const prefixCls = getPrefixCls('input-file-dragger');
const cls = appendClass => `${prefixCls}-${appendClass}`;
const InputFileDragger = defineComponent({
  name: COMPONENT_NAME_DRAGGER,
  props: inputFileDraggerProps,
  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT],
  slots: Object,
  setup: (props, _ref) => {
    let {
      emit,
      slots,
      attrs
    } = _ref;
    useTheme();
    const {
      t
    } = useLocale();
    const {
      currentFiles,
      updateCurrentFiles,
      inputRef,
      disabled,
      multiple,
      accept,
      acceptStr,
      openFileExplorer,
      handleInputFileChange
    } = useInputFile(props, emit);
    const handleFileTypeInvalid = files => {
      if (!props.onFileTypeInvalid) {
        Message.error(t('upload.fileTypeInvalidTip'));
      }
      props.onFileTypeInvalid(files);
    };
    const {
      isHovering,
      handleEnter,
      handleLeave,
      handleOver,
      handleDrop
    } = useFileDrop({
      disabled,
      multiple,
      accept,
      afterDrop: files => {
        updateCurrentFiles(files);
        emit(CHANGE_EVENT, files);
      },
      onFileTypeInvalid: handleFileTypeInvalid
    });
    const renderFileList = files => {
      if (files.length === 0) {
        return null;
      }
      if (slots.fileList) {
        return slots.fileList({
          files
        });
      }
      return files.length > 1 ? `${files.length} 个文件` : files[0].name;
    };
    return () => {
      var _slots$default;
      return createVNode("div", {
        "class": prefixCls
      }, [createVNode("div", {
        "class": cls('visible-content'),
        "style": attrs.style
      }, [createVNode("div", {
        "class": [cls('droppable'), isHovering.value && 'is-hovering', disabled.value && 'is-disabled'],
        "onDragenter": handleEnter,
        "onDragleave": handleLeave,
        "onDrop": handleDrop,
        "onDragover": handleOver,
        "onClick": openFileExplorer
      }, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots, {})]), createVNode("div", {
        "class": cls('file-list')
      }, [renderFileList(currentFiles.value)])]), createVNode("input", {
        "ref": inputRef,
        "class": cls('input'),
        "type": 'file',
        "accept": acceptStr.value,
        "multiple": multiple.value,
        "onChange": handleInputFileChange,
        "onClick": e => e.stopPropagation()
      }, null)]);
    };
  }
});

export { InputFileDragger as default };