tass-ui/lib/packages/components/upload/src/upload.vue.js

A high quality UI Toolkit built on Vue.js3+.

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../../../theme-chalk/src/upload.scss.js");
const _hoisted_1 = { class: "tas-upload" };
const _hoisted_2 = { class: "drop-upload__out" };
const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("span", { class: "drop-upload__out__word" }, "拖拽到此上传,或", -1);
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "upload",
  props: {
    props: {
      type: Object
    },
    drop: {
      type: Boolean,
      default: () => false
    }
  },
  emits: ["changeUpload", "deleteUpload", "dropUpload"],
  setup(__props, { emit: emits }) {
    const props = __props;
    const inputRef = vue.ref(null);
    const fileList = vue.reactive([]);
    const style = {
      background: "#F2F9FF",
      border: " 1px dashed #409eff"
    };
    const isDrag = vue.ref(false);
    const drag = vue.ref(null);
    function beginUpload() {
      var _a;
      (_a = inputRef.value) == null ? void 0 : _a.click();
    }
    function submitUpload(e) {
      const files = e.target.files;
      const rawFile = files[0];
      fileList.push({
        name: rawFile.name,
        file: rawFile
      });
      emits("changeUpload", rawFile, fileList);
    }
    function deleteUpload(i) {
      let file = fileList[i];
      fileList.splice(i, 1);
      emits("deleteUpload", file, fileList);
    }
    vue.onMounted(() => {
      var _a, _b, _c, _d;
      (_a = drag.value) == null ? void 0 : _a.addEventListener("drop", handleDrop);
      (_b = drag.value) == null ? void 0 : _b.addEventListener("dragleave", (e) => {
        isDrag.value = false;
      });
      (_c = drag.value) == null ? void 0 : _c.addEventListener("dragenter", (e) => {
        e.preventDefault();
        isDrag.value = true;
      });
      (_d = drag.value) == null ? void 0 : _d.addEventListener("dragover", (e) => {
        e.preventDefault();
        isDrag.value = true;
      });
    });
    const handleDrop = (e) => {
      e.preventDefault();
      isDrag.value = false;
      for (let i = 0; i < e.dataTransfer.files.length; i++) {
        fileList.push({
          name: e.dataTransfer.files[i].name,
          file: e.dataTransfer.files[i]
        });
      }
      emits("dropUpload", e.dataTransfer.files, fileList);
    };
    return (_ctx, _cache) => {
      const _component_tass_icon = vue.resolveComponent("tass-icon");
      const _component_tass_button = vue.resolveComponent("tass-button");
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createElementVNode("div", null, [
          props.drop ? (vue.openBlock(), vue.createElementBlock("div", {
            key: 0,
            class: "drop-upload",
            ref_key: "drag",
            ref: drag,
            style: vue.normalizeStyle(isDrag.value ? style : "")
          }, [
            vue.createElementVNode("div", null, [
              vue.createElementVNode("div", _hoisted_2, [
                vue.createVNode(_component_tass_icon, { name: "upload" })
              ]),
              vue.createElementVNode("div", { class: "drop-upload__out" }, [
                _hoisted_3,
                vue.createTextVNode(),
                vue.createElementVNode("span", {
                  class: "drop-upload__out__uploadWord",
                  onClick: beginUpload
                }, "点击上传")
              ])
            ])
          ], 4)) : (vue.openBlock(), vue.createBlock(_component_tass_button, {
            key: 1,
            type: "primary",
            onClick: beginUpload
          }, {
            default: vue.withCtx(() => [
              vue.createTextVNode("点击上传")
            ]),
            _: 1
          })),
          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(fileList, (v, i) => {
            return vue.openBlock(), vue.createElementBlock("div", {
              class: "file",
              key: i
            }, [
              vue.createElementVNode("span", null, vue.toDisplayString(v.name), 1),
              vue.createVNode(_component_tass_button, {
                type: "danger",
                size: "tiny",
                onClick: ($event) => deleteUpload(i)
              }, {
                default: vue.withCtx(() => [
                  vue.createTextVNode("删除")
                ]),
                _: 2
              }, 1032, ["onClick"])
            ]);
          }), 128))
        ]),
        vue.createElementVNode("input", {
          type: "file",
          ref_key: "inputRef",
          ref: inputRef,
          onChange: submitUpload
        }, null, 544)
      ]);
    };
  }
});
exports.default = _sfc_main;