@wfrog/vc/dist/es/components/cropper/cropper.mjs

vue3 组件库 vc

import './index.css'
import { c as buildProps, x as isBoolean, u as useNamespace } from '../../chunk/E_WRn0OP.mjs';
import { v as vLoading } from '../../chunk/BeMzzYc5.mjs';
import { E as ElSpace } from '../../chunk/Ce9ApjrT.mjs';
import { E as ElButton } from '../../chunk/BT7IBuxS.mjs';
import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, unref, createBlock, createCommentVNode, renderSlot, withCtx, resolveDynamicComponent, ref, useTemplateRef, shallowRef, watch, nextTick, onMounted, onUnmounted, withDirectives, isRef, createElementVNode, normalizeStyle, createVNode, createTextVNode } from 'vue';
import { d as defaultWindow, i as index, f as file } from '../../chunk/BdDihk0t.mjs';
import { C as Component$1 } from '../dialog/dialog.mjs';
import { E as ElIcon } from '../../chunk/m2vp1CCf.mjs';
import { i as iconPropType } from '../icon/icon2.mjs';
import { _ as _export_sfc, w as withInstall } from '../../chunk/D389hx_T.mjs';
import { u as useGlobalConfig } from '../../chunk/DUkVA3sF.mjs';
import { u as useDeprecated } from '../../chunk/VAdRxe-1.mjs';
import { d as debounce } from '../../chunk/ViP2SEY4.mjs';
import { _ as _export_sfc$1 } from '../../chunk/pcqpp-6-.mjs';

const linkProps = buildProps({
  type: {
    type: String,
    values: ["primary", "success", "warning", "info", "danger", "default"],
    default: void 0
  },
  underline: {
    type: [Boolean, String],
    values: [true, false, "always", "never", "hover"],
    default: void 0
  },
  disabled: Boolean,
  href: { type: String, default: "" },
  target: {
    type: String,
    default: "_self"
  },
  icon: {
    type: iconPropType
  }
});
const linkEmits = {
  click: (evt) => evt instanceof MouseEvent
};

const __default__ = defineComponent({
  name: "ElLink"
});
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: linkProps,
  emits: linkEmits,
  setup(__props, { emit }) {
    const props = __props;
    const globalConfig = useGlobalConfig("link");
    useDeprecated({
      scope: "el-link",
      from: "The underline option (boolean)",
      replacement: "'always' | 'hover' | 'never'",
      version: "3.0.0",
      ref: "https://element-plus.org/en-US/component/link.html#underline"
    }, computed(() => isBoolean(props.underline)));
    const ns = useNamespace("link");
    const linkKls = computed(() => {
      var _a, _b, _c;
      return [
        ns.b(),
        ns.m((_c = (_b = props.type) != null ? _b : (_a = globalConfig.value) == null ? void 0 : _a.type) != null ? _c : "default"),
        ns.is("disabled", props.disabled),
        ns.is("underline", underline.value === "always"),
        ns.is("hover-underline", underline.value === "hover" && !props.disabled)
      ];
    });
    const underline = computed(() => {
      var _a, _b, _c;
      if (isBoolean(props.underline)) {
        return props.underline ? "hover" : "never";
      } else
        return (_c = (_b = props.underline) != null ? _b : (_a = globalConfig.value) == null ? void 0 : _a.underline) != null ? _c : "hover";
    });
    function handleClick(event) {
      if (!props.disabled)
        emit("click", event);
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("a", {
        class: normalizeClass(unref(linkKls)),
        href: _ctx.disabled || !_ctx.href ? void 0 : _ctx.href,
        target: _ctx.disabled || !_ctx.href ? void 0 : _ctx.target,
        onClick: handleClick
      }, [
        _ctx.icon ? (openBlock(), createBlock(unref(ElIcon), { key: 0 }, {
          default: withCtx(() => [
            (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
          ]),
          _: 1
        })) : createCommentVNode("v-if", true),
        _ctx.$slots.default ? (openBlock(), createElementBlock("span", {
          key: 1,
          class: normalizeClass(unref(ns).e("inner"))
        }, [
          renderSlot(_ctx.$slots, "default")
        ], 2)) : createCommentVNode("v-if", true),
        _ctx.$slots.icon ? renderSlot(_ctx.$slots, "icon", { key: 2 }) : createCommentVNode("v-if", true)
      ], 10, ["href", "target"]);
    };
  }
});
var Link = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "link.vue"]]);

const ElLink = withInstall(Link);

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "cropper",
  props: {
    dialog: { type: Boolean, default: false },
    visible: { type: Boolean, default: false },
    image: { default: void 0 },
    option: { default: () => ({}) },
    imageSmoothingQuality: { default: "high" },
    containerWidth: { default: "600px" },
    containerHeight: { default: "450px" },
    cropperWidth: { default: 400 },
    cropperHeight: { default: 300 }
  },
  emits: ["init", "update:visible", "cancel", "finished"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const loading = ref(false);
    const workbenchRef = useTemplateRef("workbenchRef");
    const cropperRef = shallowRef();
    const downloadLink = ref("");
    const isNeedInit = ref(false);
    const dialogVisible = computed({
      get: () => props.visible,
      set: (val) => {
        emits("update:visible", val);
      }
    });
    const containerStyle = computed(() => ({
      width: props.containerWidth,
      height: props.containerHeight
    }));
    const dialogWidth = computed(() => `${Number.parseInt(props.containerWidth) + 40}px`);
    const image = computed(() => {
      if (typeof props.image === "string") {
        const img = new Image();
        img.src = props.image;
        return img;
      }
      const file2 = props.image;
      if (defaultWindow && file2?.size) {
        const img = new Image();
        const blob = defaultWindow.URL.createObjectURL(file2);
        img.src = blob;
        return img;
      }
      return props.image;
    });
    function handleDownload() {
      if (!cropperRef.value || !props.dialog) {
        return;
      }
      const canvas = cropperRef.value.getCroppedCanvas();
      downloadLink.value = canvas?.toDataURL() || "";
    }
    async function init() {
      if (!workbenchRef.value) {
        return;
      }
      cropperRef.value?.destroy();
      loading.value = true;
      isNeedInit.value = false;
      workbenchRef.value.childNodes.forEach((item) => workbenchRef.value?.removeChild(item));
      workbenchRef.value.appendChild(image.value);
      const Cropper = await index.loadCdnSingle("cropper");
      cropperRef.value = new Cropper(image.value, {
        dragMode: "move",
        viewMode: 1,
        aspectRatio: props.cropperWidth / props.cropperHeight,
        // cropBoxResizable: true, // 是否可以改变crop框大小
        toggleDragModeOnDblclick: false,
        // 双击切换拖动模式
        guides: true,
        // 网格
        // minContainerHeight: props.containerHeight,
        cropmove: props.dialog ? debounce(handleDownload, 1e3) : () => {
        },
        ...props.option,
        ready() {
          loading.value = false;
          handleDownload();
          nextTick(() => emits("init"));
        }
      });
    }
    function handleCancle() {
      if (loading.value) {
        return;
      }
      dialogVisible.value = false;
      emits("cancel");
    }
    function getCroppedCanvas() {
      if (loading.value || !cropperRef.value) {
        return;
      }
      return cropperRef.value.getCroppedCanvas({
        width: props.cropperWidth,
        height: props.cropperHeight,
        imageSmoothingQuality: props.imageSmoothingQuality
      });
    }
    function getBlobData() {
      const canvas = getCroppedCanvas();
      if (!canvas) {
        return void 0;
      }
      return file.canvasToBlob(canvas);
    }
    function handleFinish() {
      const canvas = getCroppedCanvas();
      const blob = getBlobData();
      dialogVisible.value = false;
      emits("finished", canvas, blob);
    }
    watch(() => props.option, () => {
      isNeedInit.value = true;
    });
    watch(image, () => {
      isNeedInit.value = true;
    });
    watch(dialogVisible, () => {
      props.visible && (!cropperRef.value || isNeedInit.value) && nextTick(() => init());
    });
    __expose({ instance: cropperRef, getCroppedCanvas, getBlobData });
    onMounted(() => !props.dialog && init());
    onUnmounted(() => cropperRef.value?.destroy());
    return (_ctx, _cache) => {
      const _component_ElButton = ElButton;
      const _component_ElLink = ElLink;
      const _component_ElSpace = ElSpace;
      const _directive_loading = vLoading;
      return __props.dialog ? (openBlock(), createBlock(Component$1, {
        key: 0,
        modelValue: unref(dialogVisible),
        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(dialogVisible) ? dialogVisible.value = $event : null),
        title: "图片裁剪",
        width: unref(dialogWidth),
        "append-to-body": "",
        "close-on-click-modal": false,
        "before-close": handleCancle,
        "show-fullscreen": false,
        lazy: false
      }, {
        footer: withCtx(() => [
          createVNode(_component_ElSpace, null, {
            default: withCtx(() => [
              createVNode(_component_ElButton, {
                loading: unref(loading),
                onClick: handleCancle
              }, {
                default: withCtx(() => [..._cache[1] || (_cache[1] = [
                  createTextVNode("取消", -1)
                ])]),
                _: 1
              }, 8, ["loading"]),
              createVNode(_component_ElLink, {
                href: unref(downloadLink),
                download: "cropper.jpg",
                underline: false
              }, {
                default: withCtx(() => [
                  createVNode(_component_ElButton, { type: "primary" }, {
                    default: withCtx(() => [..._cache[2] || (_cache[2] = [
                      createTextVNode("下载切片", -1)
                    ])]),
                    _: 1
                  })
                ]),
                _: 1
              }, 8, ["href"]),
              createVNode(_component_ElButton, {
                loading: unref(loading),
                type: "primary",
                onClick: handleFinish
              }, {
                default: withCtx(() => [..._cache[3] || (_cache[3] = [
                  createTextVNode("确定", -1)
                ])]),
                _: 1
              }, 8, ["loading"])
            ]),
            _: 1
          })
        ]),
        default: withCtx(() => [
          withDirectives(createElementVNode("div", {
            ref_key: "workbenchRef",
            ref: workbenchRef,
            class: normalizeClass(_ctx.$style.workbench),
            style: normalizeStyle(unref(containerStyle))
          }, null, 6), [
            [_directive_loading, unref(loading)]
          ])
        ]),
        _: 1
      }, 8, ["modelValue", "width"])) : withDirectives((openBlock(), createElementBlock("div", {
        key: 1,
        ref_key: "workbenchRef",
        ref: workbenchRef,
        class: normalizeClass(_ctx.$style.workbench),
        style: normalizeStyle(unref(containerStyle))
      }, null, 6)), [
        [_directive_loading, unref(loading)]
      ]);
    };
  }
});

/* unplugin-vue-components disabled */const workbench = "_workbench_ja7q1_1";
const style0 = {
	workbench: workbench
};

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

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

export { Component as C, __vite_glob_0_7 as _ };