@wfrog/vc/dist/es/components/upload-file/upload-file.mjs

vue3 组件库 vc

import './index.css'
import { defineComponent, ref, computed, withDirectives, createBlock, openBlock, unref, normalizeClass, withCtx, createElementBlock, createCommentVNode, renderSlot, Fragment, normalizeStyle, createTextVNode, createVNode, toDisplayString, nextTick } from 'vue';
import { d as defaultWindow, f as file } from '../../chunk/BdDihk0t.mjs';
import { ElUpload, ElImage, vLoading } from 'element-plus';
import { C as Component$2 } from '../button/button.mjs';
import { C as Component$3 } from '../cropper/cropper.mjs';
import { C as Component$1 } from '../el-icon/el-icon.mjs';
import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';

const imageOptions = {
  width: "200px",
  height: "100px",
  src: "",
  fit: "contain",
  icon: "Plus",
  iconSize: 30
};
const buttonOptions = {
  icon: "Upload",
  // 默认icon
  type: "primary",
  size: "",
  // 按钮尺寸
  text: "上传图片"
};

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "upload-file",
  props: {
    accept: { default: ".jpg,.jpeg,.png" },
    type: { default: "image" },
    imageOptions: { default: () => imageOptions },
    buttonOptions: { default: () => buttonOptions },
    maxSize: { default: 2 * 1024 * 1024 },
    httpRequest: {},
    beforeUpload: {},
    cropper: { type: Boolean, default: false },
    cropperOption: { default: () => ({}) }
  },
  emits: ["error"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const loading = ref(false);
    const imgSrc = ref("");
    const visible = ref(false);
    const image = ref();
    const imgOptions = computed(() => {
      const options = { ...imageOptions, ...props.imageOptions };
      if (imgSrc.value) {
        options.src = imgSrc.value;
      }
      return options;
    });
    const btnOptions = computed(() => ({ ...buttonOptions, ...props.buttonOptions }));
    const hasImage = computed(() => !!imgOptions.value.src);
    const imageSizeStyle = computed(() => {
      const options = imgOptions.value;
      return {
        "width": options.width,
        "height": options.height,
        "line-height": options.height
      };
    });
    const iconSizeStyle = computed(() => {
      const options = imgOptions.value;
      return {
        "width": options.width,
        "height": options.height,
        "line-height": options.height,
        "font-size": `${options.iconSize}px`
      };
    });
    const isImageType = computed(() => props.type === "image");
    const isButtonType = computed(() => props.type === "button");
    function checkFile(file2) {
      if (file2.size > props.maxSize) {
        const message = `文件大小不能超过 ${props.maxSize / 1024 / 1024}M`;
        emits("error", message);
        return false;
      }
      if (props.beforeUpload) {
        if (props.beforeUpload(file2)) {
          loading.value = true;
          return true;
        }
        return false;
      }
      loading.value = true;
      return true;
    }
    function handleBeforeUpload(file2) {
      const checkResult = checkFile(file2);
      if (checkResult && props.cropper) {
        image.value = file2;
        nextTick(() => {
          visible.value = true;
        });
        return false;
      }
      return checkResult;
    }
    const handleHttpRequest = ({ file: file2 }) => {
      if (!defaultWindow) {
        return;
      }
      if (props.httpRequest) {
        const localUrl = defaultWindow.URL.createObjectURL(file2);
        const done = () => {
          imgSrc.value = localUrl;
          loading.value = false;
        };
        props.httpRequest(file2, done, localUrl);
      }
    };
    function handleCancel() {
      loading.value = false;
    }
    function handleFinished(canvas, blob) {
      const myFile = file.blobToFile(blob, "cropper.jpg");
      handleHttpRequest({ file: myFile });
    }
    return (_ctx, _cache) => {
      return withDirectives((openBlock(), createBlock(unref(ElUpload), {
        class: normalizeClass([_ctx.$style.uploader, `upload-type-${__props.type}`]),
        action: "",
        "show-file-list": false,
        accept: __props.accept,
        "http-request": handleHttpRequest,
        "before-upload": handleBeforeUpload
      }, {
        default: withCtx(() => [
          isImageType.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
            hasImage.value ? (openBlock(), createBlock(unref(ElImage), {
              key: 0,
              src: imgOptions.value.src,
              fit: imgOptions.value.fit,
              style: normalizeStyle(imageSizeStyle.value),
              class: normalizeClass(_ctx.$style.photo)
            }, {
              placeholder: withCtx(() => [..._cache[1] || (_cache[1] = [
                createTextVNode("加载中", -1)
              ])]),
              _: 1
            }, 8, ["src", "fit", "style", "class"])) : (openBlock(), createBlock(Component$1, {
              key: 1,
              name: imgOptions.value.icon,
              class: normalizeClass([_ctx.$style.icon]),
              style: normalizeStyle(iconSizeStyle.value)
            }, null, 8, ["name", "class", "style"]))
          ], 64)) : createCommentVNode("", true),
          isButtonType.value ? renderSlot(_ctx.$slots, "default", { key: 1 }, () => [
            createVNode(Component$2, {
              size: btnOptions.value.size,
              type: btnOptions.value.type,
              icon: { name: btnOptions.value.icon }
            }, {
              default: withCtx(() => [
                createTextVNode(toDisplayString(btnOptions.value.text), 1)
              ]),
              _: 1
            }, 8, ["size", "type", "icon"])
          ]) : createCommentVNode("", true),
          __props.cropper && image.value ? (openBlock(), createBlock(Component$3, {
            key: 2,
            visible: visible.value,
            "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
            image: image.value,
            option: __props.cropperOption,
            dialog: "",
            onFinished: handleFinished,
            onCancel: handleCancel
          }, null, 8, ["visible", "image", "option"])) : createCommentVNode("", true)
        ]),
        _: 3
      }, 8, ["class", "accept"])), [
        [unref(vLoading), loading.value]
      ]);
    };
  }
});

/* unplugin-vue-components disabled */const uploader = "_uploader_e7qei_1";
const icon = "_icon_e7qei_18";
const photo = "_photo_e7qei_26";
const style0 = {
	uploader: uploader,
	icon: icon,
	photo: photo
};

const cssModules = {
  "$style": style0
};
const Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);

const __vite_glob_0_35 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
    __proto__: null,
    default: Component
}, Symbol.toStringTag, { value: 'Module' }));

export { Component as C, __vite_glob_0_35 as _ };