yuang-framework-ui-pc/lib/ele-cropper/index.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const Cropper = require("cropperjs");
const util = require("../ele-pro-layout/util");
const CropperPreview = require("./components/cropper-preview");
const CropperTools = require("./components/cropper-tools");
const props = require("./props");
const _sfc_main = vue.defineComponent({
  name: "EleCropper",
  components: { CropperPreview, CropperTools },
  props: props.cropperProps,
  emits: props.cropperEmits,
  setup(props2, { emit }) {
    const isResponsive = util.useResponsive(props2);
    const imageRef = vue.ref(null);
    const previewRef = vue.ref(null);
    const state = {
      instance: null,
      imageType: props2.imageType,
      scaleXValue: -1,
      scaleYValue: -1
    };
    const render = () => {
      destroy();
      const options = { ...props2.options };
      if (props2.preview && previewRef.value) {
        options.preview = previewRef.value.getPreviews();
      }
      if (imageRef.value) {
        state.instance = new Cropper(imageRef.value, options);
      }
    };
    const destroy = () => {
      state.instance && state.instance.destroy();
      state.instance = null;
    };
    const handleZoomIn = () => {
      state.instance && state.instance.zoom(0.1);
    };
    const handleZoomOut = () => {
      state.instance && state.instance.zoom(-0.1);
    };
    const handleMoveLeft = () => {
      state.instance && state.instance.move(-10, 0);
    };
    const handleMoveRight = () => {
      state.instance && state.instance.move(10, 0);
    };
    const handleMoveUp = () => {
      state.instance && state.instance.move(0, -10);
    };
    const handleMoveDown = () => {
      state.instance && state.instance.move(0, 10);
    };
    const handleRotateLeft = () => {
      state.instance && state.instance.rotate(-45);
    };
    const handleRotateRight = () => {
      state.instance && state.instance.rotate(45);
    };
    const handleFlipX = () => {
      state.instance && state.instance.scaleX(state.scaleXValue);
      state.scaleXValue = -state.scaleXValue;
    };
    const handleFlipY = () => {
      state.instance && state.instance.scaleY(state.scaleYValue);
      state.scaleYValue = -state.scaleYValue;
    };
    const handleReset = () => {
      state.instance && state.instance.reset();
    };
    const handleUpload = ({ data, type }) => {
      state.imageType = type;
      if (state.instance) {
        state.instance.replace(data);
      } else {
        const elem = imageRef.value;
        if (elem) {
          elem.src = data;
          elem.style.display = "block";
        }
        render();
      }
    };
    const handleOk = () => {
      if (!state.instance) {
        emit("done");
        return;
      }
      const opt = props2.croppedOptions ? props2.croppedOptions : void 0;
      const result = state.instance.getCroppedCanvas(opt);
      if (!result) {
        emit("done");
        return;
      }
      if (props2.toBlob) {
        result.toBlob((blob) => {
          emit("done", blob);
        }, state.imageType);
        return;
      }
      emit("done", result.toDataURL(state.imageType));
    };
    vue.watch(
      () => props2.src,
      (src) => {
        if (src) {
          if (state.instance) {
            state.instance.replace(src);
          } else {
            vue.nextTick(() => {
              render();
            });
          }
        } else {
          destroy();
        }
      }
    );
    vue.watch(
      () => props2.imageType,
      (value) => {
        if (value) {
          state.imageType = value;
        }
      }
    );
    vue.onMounted(() => {
      props2.src && render();
    });
    vue.onBeforeUnmount(() => {
      destroy();
    });
    return {
      imageRef,
      previewRef,
      isResponsive,
      handleZoomIn,
      handleZoomOut,
      handleMoveLeft,
      handleMoveRight,
      handleMoveUp,
      handleMoveDown,
      handleRotateLeft,
      handleRotateRight,
      handleFlipX,
      handleFlipY,
      handleReset,
      handleUpload,
      handleOk
    };
  }
});
const _export_sfc = (sfc, props2) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props2) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = { class: "ele-cropper-main" };
const _hoisted_2 = ["src"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_CropperPreview = vue.resolveComponent("CropperPreview");
  const _component_CropperTools = vue.resolveComponent("CropperTools");
  return vue.openBlock(), vue.createElementBlock("div", {
    class: vue.normalizeClass(["ele-cropper", { "is-responsive": _ctx.isResponsive }])
  }, [
    vue.createElementVNode("div", _hoisted_1, [
      vue.createElementVNode("div", {
        class: "ele-cropper-image",
        style: vue.normalizeStyle({ height: _ctx.height })
      }, [
        vue.createElementVNode("img", {
          ref: "imageRef",
          src: _ctx.src,
          style: { display: "none" }
        }, null, 8, _hoisted_2)
      ], 4),
      _ctx.preview ? (vue.openBlock(), vue.createBlock(_component_CropperPreview, {
        key: 0,
        ref: "previewRef",
        previewWidth: _ctx.previewWidth,
        aspectRatio: _ctx.options ? _ctx.options.aspectRatio : void 0
      }, null, 8, ["previewWidth", "aspectRatio"])) : vue.createCommentVNode("", true)
    ]),
    vue.createVNode(_component_CropperTools, {
      tools: _ctx.tools,
      accept: _ctx.accept,
      locale: _ctx.locale,
      tooltip: _ctx.tooltip,
      tooltipProps: _ctx.tooltipProps,
      beforeUploadClick: _ctx.beforeUploadClick,
      onZoomIn: _ctx.handleZoomIn,
      onZoomOut: _ctx.handleZoomOut,
      onMoveLeft: _ctx.handleMoveLeft,
      onMoveRight: _ctx.handleMoveRight,
      onMoveUp: _ctx.handleMoveUp,
      onMoveDown: _ctx.handleMoveDown,
      onRotateLeft: _ctx.handleRotateLeft,
      onRotateRight: _ctx.handleRotateRight,
      onFlipX: _ctx.handleFlipX,
      onFlipY: _ctx.handleFlipY,
      onReset: _ctx.handleReset,
      onUpload: _ctx.handleUpload,
      onOk: _ctx.handleOk
    }, null, 8, ["tools", "accept", "locale", "tooltip", "tooltipProps", "beforeUploadClick", "onZoomIn", "onZoomOut", "onMoveLeft", "onMoveRight", "onMoveUp", "onMoveDown", "onRotateLeft", "onRotateRight", "onFlipX", "onFlipY", "onReset", "onUpload", "onOk"])
  ], 2);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = index;