ele-admin-plus 1.5.1-beta.4 → 1.6.0-beta.2

package/es/ele-config-provider/types.d.ts

@@ -4,6 +4,7 @@ import type {
   EleMessageOptions,
   EleMessageBoxOptions
 } from '../ele-app/plus';
+import type { ChatLocale } from '../ele-chat/types';
 import type { ButtonsLocale } from '../ele-buttons/types';
 import type { CopyableLocale } from '../ele-copyable/types';
 import type { CronBuilderLocale } from '../ele-cron-builder/types';
@@ -12,7 +13,7 @@ import type { CropperLocale } from '../ele-cropper/types';
 import type { CrudLocale } from '../ele-crud/types';
 import type { FileListLocale } from '../ele-file-list/types';
 import type { IconSelectLocale } from '../ele-icon-select/types';
-import type { MapLocale } from '../ele-map-picker/types';
+import type { MapPluginConstructor, MapLocale } from '../ele-map-picker/types';
 import type { ProFormLocale } from '../ele-pro-form/types';
 import type { TableLocale } from '../ele-pro-table/types';
 import type { TourLocale } from '../ele-tour/types';
@@ -24,6 +25,8 @@ import type { UploadLocale } from '../ele-upload-list/types';
 export interface EleLocale {
   /** 操作按钮 */
   buttons: ButtonsLocale;
+  /** 聊天 */
+  chat: ChatLocale;
   /** 文本复制 */
   copyable: CopyableLocale;
   /** cron 生成器 */
@@ -96,6 +99,7 @@ export interface GlobalProvide {
   table?: TableGlobalConfig;
   message?: MessageGlobalConfig;
   messageBox?: EleMessageBoxOptions;
+  mapPlugin?: MapPluginConstructor;
   mapKey?: string;
 }
 

package/es/ele-copyable/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, onDeactivated, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, createVNode, normalizeStyle, renderSlot, createBlock, unref, normalizeProps, mergeProps, withCtx, resolveDynamicComponent } from "vue";
+import { defineComponent, ref, onDeactivated, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, renderSlot, createBlock, unref, normalizeProps, mergeProps, withCtx, resolveDynamicComponent, createVNode } from "vue";
 import { ElIcon } from "element-plus";
 import { CheckOutlined, CopyOutlined } from "../icons/index";
 import { copyText } from "../utils/common";

package/es/ele-count-up/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, unref } from "vue";
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, unref } from "vue";
 import { CountUp } from "countup.js";
 import { countUpEmits, countUpProps } from "./props";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/es/ele-cron-builder/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, createBlock, openBlock, mergeProps, unref, createSlots, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString, renderList, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, ref, watch, openBlock, createBlock, mergeProps, unref, createSlots, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString, renderList, normalizeProps, guardReactiveProps } from "vue";
 import { ElButton } from "element-plus";
 import { useLocale } from "../ele-config-provider/receiver";
 import EleModal from "../ele-modal/index";

package/es/ele-cron-panel/components/cron-day.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch, createElementBlock, openBlock, createVNode, unref, isRef, withCtx, createElementVNode, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from "vue";
+import { defineComponent, ref, watch, openBlock, createElementBlock, createVNode, unref, isRef, withCtx, createElementVNode, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from "vue";
 import { ElRadioGroup, ElRadio, ElInputNumber, ElCheckboxGroup, ElCheckbox } from "element-plus";
 import { useCron } from "../util";
 const _hoisted_1 = { class: "ele-cron-panel-content" };

package/es/ele-cron-panel/components/cron-hour.js

@@ -1,4 +1,4 @@
-import { defineComponent, watch, createElementBlock, openBlock, createVNode, unref, isRef, withCtx, createElementVNode, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from "vue";
+import { defineComponent, watch, openBlock, createElementBlock, createVNode, unref, isRef, withCtx, createElementVNode, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from "vue";
 import { ElRadioGroup, ElRadio, ElInputNumber, ElCheckboxGroup, ElCheckbox } from "element-plus";
 import { useCron } from "../util";
 const _hoisted_1 = { class: "ele-cron-panel-content" };

package/es/ele-cron-panel/components/cron-minute.js

@@ -1,4 +1,4 @@
-import { defineComponent, watch, createElementBlock, openBlock, createVNode, unref, isRef, withCtx, createElementVNode, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from "vue";
+import { defineComponent, watch, openBlock, createElementBlock, createVNode, unref, isRef, withCtx, createElementVNode, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from "vue";
 import { ElRadioGroup, ElRadio, ElInputNumber, ElCheckboxGroup, ElCheckbox } from "element-plus";
 import { useCron } from "../util";
 const _hoisted_1 = { class: "ele-cron-panel-content" };

package/es/ele-cron-panel/components/cron-month.js

@@ -1,4 +1,4 @@
-import { defineComponent, watch, createElementBlock, openBlock, createVNode, unref, isRef, withCtx, createElementVNode, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from "vue";
+import { defineComponent, watch, openBlock, createElementBlock, createVNode, unref, isRef, withCtx, createElementVNode, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from "vue";
 import { ElRadioGroup, ElRadio, ElInputNumber, ElCheckboxGroup, ElCheckbox } from "element-plus";
 import { useCron } from "../util";
 const _hoisted_1 = { class: "ele-cron-panel-content" };

package/es/ele-cron-panel/components/cron-second.js

@@ -1,4 +1,4 @@
-import { defineComponent, watch, createElementBlock, openBlock, createVNode, unref, isRef, withCtx, createElementVNode, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from "vue";
+import { defineComponent, watch, openBlock, createElementBlock, createVNode, unref, isRef, withCtx, createElementVNode, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from "vue";
 import { ElRadioGroup, ElRadio, ElInputNumber, ElCheckboxGroup, ElCheckbox } from "element-plus";
 import { useCron } from "../util";
 const _hoisted_1 = { class: "ele-cron-panel-content" };

package/es/ele-cron-panel/components/cron-week.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, createElementBlock, openBlock, createVNode, unref, isRef, withCtx, createElementVNode, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from "vue";
+import { defineComponent, ref, computed, watch, openBlock, createElementBlock, createVNode, unref, isRef, withCtx, createElementVNode, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from "vue";
 import { ElRadioGroup, ElRadio, ElInputNumber, ElCheckboxGroup, ElCheckbox } from "element-plus";
 import { useCron } from "../util";
 const _hoisted_1 = { class: "ele-cron-panel-content" };

package/es/ele-cron-panel/components/cron-year.js

@@ -1,4 +1,4 @@
-import { defineComponent, watch, createElementBlock, openBlock, createVNode, unref, isRef, withCtx, createElementVNode, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from "vue";
+import { defineComponent, watch, openBlock, createElementBlock, createVNode, unref, isRef, withCtx, createElementVNode, toDisplayString, Fragment, renderList, createBlock, createCommentVNode } from "vue";
 import { ElRadioGroup, ElRadio, ElInputNumber, ElCheckboxGroup, ElCheckbox } from "element-plus";
 import { useCron } from "../util";
 const _hoisted_1 = { class: "ele-cron-panel-content" };

package/es/ele-cron-panel/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, createElementBlock, openBlock, createElementVNode, createVNode, withCtx, toDisplayString, unref, Fragment, renderList, normalizeClass, withModifiers } from "vue";
+import { defineComponent, ref, computed, watch, openBlock, createElementBlock, createElementVNode, createVNode, withCtx, toDisplayString, unref, Fragment, renderList, normalizeClass, withModifiers } from "vue";
 import { useLocale } from "../ele-config-provider/receiver";
 import EleTabs from "../ele-tabs/index";
 import CronSecond from "./components/cron-second";

package/es/ele-cropper/components/cropper-tools.d.ts

@@ -16,19 +16,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     /** 国际化 */
     locale: PropType<Partial<CropperLocale>>;
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    reset: () => void;
+    action: (_action: "reset" | "zoomIn" | "zoomOut" | "moveLeft" | "moveRight" | "moveUp" | "moveDown" | "rotateLeft" | "rotateRight" | "flipX" | "flipY" | "ok") => void;
     upload: (_option?: UploadOption | undefined) => void;
-    zoomIn: () => void;
-    zoomOut: () => void;
-    moveLeft: () => void;
-    moveRight: () => void;
-    moveUp: () => void;
-    moveDown: () => void;
-    rotateLeft: () => void;
-    rotateRight: () => void;
-    flipX: () => void;
-    flipY: () => void;
-    ok: () => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     /** 操作按钮布局 */
     tools: StringConstructor;
@@ -43,19 +32,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     /** 国际化 */
     locale: PropType<Partial<CropperLocale>>;
 }>> & Readonly<{
-    onReset?: (() => any) | undefined;
+    onAction?: ((_action: "reset" | "zoomIn" | "zoomOut" | "moveLeft" | "moveRight" | "moveUp" | "moveDown" | "rotateLeft" | "rotateRight" | "flipX" | "flipY" | "ok") => any) | undefined;
     onUpload?: ((_option?: UploadOption | undefined) => any) | undefined;
-    onZoomIn?: (() => any) | undefined;
-    onZoomOut?: (() => any) | undefined;
-    onMoveLeft?: (() => any) | undefined;
-    onMoveRight?: (() => any) | undefined;
-    onMoveUp?: (() => any) | undefined;
-    onMoveDown?: (() => any) | undefined;
-    onRotateLeft?: (() => any) | undefined;
-    onRotateRight?: (() => any) | undefined;
-    onFlipX?: (() => any) | undefined;
-    onFlipY?: (() => any) | undefined;
-    onOk?: (() => any) | undefined;
 }>, {
     tooltip: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/es/ele-cropper/components/cropper-tools.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, shallowRef, watch, markRaw, createElementBlock, openBlock, createVNode, Fragment, renderList, createBlock, unref, withCtx, normalizeClass, createCommentVNode, createTextVNode, toDisplayString, mergeProps } from "vue";
+import { defineComponent, ref, shallowRef, watch, markRaw, openBlock, createElementBlock, Fragment, renderList, createBlock, unref, withCtx, createVNode, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, mergeProps } from "vue";
 import { ElButtonGroup, ElUpload, ElButton } from "element-plus";
 import { CheckOutlined, UploadOutlined, SyncOutlined, SortOutlined, SwapOutlined, ReloadOutlined, UndoOutlined, ArrowDownOutlined, ArrowUpOutlined, ArrowRightOutlined, ArrowLeftOutlined, ZoomOutOutlined, ZoomInOutlined } from "../../icons/index";
 import { useTimer } from "../../utils/hook";
@@ -6,7 +6,6 @@ import { useLocale } from "../../ele-config-provider/receiver";
 import EleTooltip from "../../ele-tooltip/index";
 const _hoisted_1 = { class: "ele-cropper-tools" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{ name: "CropperTools" },
   __name: "cropper-tools",
   props: {
     /** 操作按钮布局 */
@@ -23,19 +22,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     locale: Object
   },
   emits: {
-    zoomIn: () => true,
-    zoomOut: () => true,
-    moveLeft: () => true,
-    moveRight: () => true,
-    moveUp: () => true,
-    moveDown: () => true,
-    rotateLeft: () => true,
-    rotateRight: () => true,
-    flipX: () => true,
-    flipY: () => true,
-    reset: () => true,
-    upload: (_option) => true,
-    ok: () => true
+    action: (_action) => true,
+    upload: (_option) => true
   },
   setup(__props, { emit: __emit }) {
     const props = __props;
@@ -90,7 +78,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       startHideTipTimer(() => {
         hideTooltip();
       });
-      emit(name);
+      emit("action", name);
     };
     const handleUploadButtonClick = (e) => {
       startHideTipTimer(() => {

package/es/ele-cropper/index.d.ts

@@ -1,4 +1,4 @@
-import { CropperOptions } from './types';
+import { default as Cropper } from 'cropperjs';
 
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     height: StringConstructor;
@@ -24,8 +24,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: number;
     };
     toBlob: BooleanConstructor;
-    options: import('vue').PropType<CropperOptions>;
-    croppedOptions: import('vue').PropType<import('./types').CroppedOptions>;
+    options: import('vue').PropType<import('cropperjs').CropperOptions>;
+    croppedOptions: import('vue').PropType<Parameters<import('cropperjs').CropperSelection["$toCanvas"]>[0]>;
+    aspectRatio: NumberConstructor;
     tooltip: {
         type: BooleanConstructor;
         default: boolean;
@@ -39,6 +40,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     locale: import('vue').PropType<Partial<import('./types').CropperLocale>>;
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     done: (_result?: string | Blob | null | undefined) => void;
+    init: (_cropperInstance: Cropper) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     height: StringConstructor;
     src: StringConstructor;
@@ -63,8 +65,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         default: number;
     };
     toBlob: BooleanConstructor;
-    options: import('vue').PropType<CropperOptions>;
-    croppedOptions: import('vue').PropType<import('./types').CroppedOptions>;
+    options: import('vue').PropType<import('cropperjs').CropperOptions>;
+    croppedOptions: import('vue').PropType<Parameters<import('cropperjs').CropperSelection["$toCanvas"]>[0]>;
+    aspectRatio: NumberConstructor;
     tooltip: {
         type: BooleanConstructor;
         default: boolean;
@@ -78,14 +81,15 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     locale: import('vue').PropType<Partial<import('./types').CropperLocale>>;
 }>> & Readonly<{
     onDone?: ((_result?: string | Blob | null | undefined) => any) | undefined;
+    onInit?: ((_cropperInstance: Cropper) => any) | undefined;
 }>, {
     tooltip: boolean;
+    imageType: string;
+    accept: string;
     tools: string;
-    responsive: boolean;
     preview: boolean;
-    accept: string;
-    imageType: string;
     previewWidth: number;
     toBlob: boolean;
+    responsive: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/ele-cropper/index.js

@@ -1,11 +1,8 @@
-import { defineComponent, ref, watch, nextTick, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, createVNode, createBlock, createCommentVNode, normalizeStyle } from "vue";
+import { defineComponent, useId, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, normalizeStyle, createVNode } from "vue";
 import Cropper from "cropperjs";
 import { useResponsive } from "../ele-pro-layout/util";
-import CropperPreview from "./components/cropper-preview";
 import CropperTools from "./components/cropper-tools";
 import { cropperEmits, cropperProps } from "./props";
-const _hoisted_1 = { class: "ele-cropper-main" };
-const _hoisted_2 = ["src"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "EleCropper" },
   __name: "index",
@@ -14,122 +11,171 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const cropperId = useId();
     const isResponsive = useResponsive(props);
-    const imageRef = ref(null);
-    const previewRef = ref(null);
-    const state = {
-      instance: null,
-      imageType: props.imageType,
-      scaleXValue: -1,
-      scaleYValue: -1
+    const containerRef = ref(null);
+    let cropperInstance = null;
+    let imageType = props.imageType;
+    const getCropperImage = () => {
+      if (!cropperInstance) {
+        return;
+      }
+      return cropperInstance.getCropperImage();
     };
-    const render = () => {
-      destroy();
-      const options = { ...props.options };
-      if (props.preview && previewRef.value) {
-        options.preview = previewRef.value.getPreviews();
+    const getCropperSelection = () => {
+      if (!cropperInstance) {
+        return;
+      }
+      return cropperInstance.getCropperSelection();
+    };
+    const render = (src) => {
+      if (!containerRef.value) {
+        return;
       }
-      if (imageRef.value) {
-        state.instance = new Cropper(imageRef.value, options);
+      const pw = props.previewWidth;
+      const aspectRatio = props.aspectRatio ?? props.options?.aspectRatio;
+      const aspectRatioStr = aspectRatio ? ` aspect-ratio="${aspectRatio}"` : "";
+      const image = new Image();
+      image.src = src;
+      image.crossOrigin = "anonymous";
+      cropperInstance = new Cropper(image, {
+        template: props.options?.template ?? `<div class="ele-cropper-image">
+  <cropper-canvas background>
+    <cropper-image rotatable scalable translatable></cropper-image>
+    <cropper-shade hidden></cropper-shade>
+    <cropper-handle action="move" plain></cropper-handle>
+    <cropper-selection id="${cropperId}"${aspectRatioStr} initial-coverage="0.8" movable resizable>
+      <cropper-grid role="grid" bordered covered></cropper-grid>
+      <cropper-crosshair centered></cropper-crosshair>
+      <cropper-handle action="move" theme-color="rgba(0, 0, 0, 0)"></cropper-handle>
+      <cropper-handle action="n-resize"></cropper-handle>
+      <cropper-handle action="e-resize"></cropper-handle>
+      <cropper-handle action="s-resize"></cropper-handle>
+      <cropper-handle action="w-resize"></cropper-handle>
+      <cropper-handle action="ne-resize"></cropper-handle>
+      <cropper-handle action="nw-resize"></cropper-handle>
+      <cropper-handle action="se-resize"></cropper-handle>
+      <cropper-handle action="sw-resize"></cropper-handle>
+    </cropper-selection>
+  </cropper-canvas>
+</div>
+<div class="ele-cropper-previews" style="width: ${pw}px;">
+  <cropper-viewer selection="#${cropperId}" class="ele-cropper-preview"></cropper-viewer>
+  <cropper-viewer selection="#${cropperId}" class="ele-cropper-preview ${aspectRatio === 1 ? "is-circle" : "is-small"}"></cropper-viewer>
+</div>`,
+        container: containerRef.value
+      });
+      emit("init", cropperInstance);
+    };
+    const handleDone = (result) => {
+      emit("done", result);
+    };
+    const handleAction = (action) => {
+      const cropperImage = getCropperImage();
+      if (!cropperImage) {
+        return;
+      }
+      switch (action) {
+        case "zoomIn":
+          cropperImage.$zoom(0.1);
+          break;
+        case "zoomOut":
+          cropperImage.$zoom(-0.1);
+          break;
+        case "moveLeft":
+          cropperImage.$move(-10, 0);
+          break;
+        case "moveRight":
+          cropperImage.$move(10, 0);
+          break;
+        case "moveUp":
+          cropperImage.$move(0, -10);
+          break;
+        case "moveDown":
+          cropperImage.$move(0, 10);
+          break;
+        case "rotateLeft":
+          cropperImage.$rotate(-Math.PI / 4);
+          break;
+        case "rotateRight":
+          cropperImage.$rotate(Math.PI / 4);
+          break;
+        case "flipX":
+          cropperImage.$scale(-1, 1);
+          break;
+        case "flipY":
+          cropperImage.$scale(1, -1);
+          break;
+        case "reset":
+          cropperImage.$resetTransform();
+          cropperImage.$center("contain");
+          const cropperSelection = getCropperSelection();
+          cropperSelection && cropperSelection.$reset();
+          break;
+        case "ok":
+          handleOk();
+          break;
       }
     };
     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();
+      cropperInstance && cropperInstance.destroy();
+      cropperInstance = null;
     };
     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");
+      if (!data) {
         return;
       }
-      const opt = props.croppedOptions ? props.croppedOptions : void 0;
-      const result = state.instance.getCroppedCanvas(opt);
-      if (!result) {
-        emit("done");
-        return;
+      const cropperImage = getCropperImage();
+      if (cropperImage) {
+        imageType = type;
+        cropperImage.src = data;
       }
-      if (props.toBlob) {
-        result.toBlob((blob) => {
-          emit("done", blob);
-        }, state.imageType);
+    };
+    const handleOk = () => {
+      const cropperSelection = getCropperSelection();
+      if (!cropperSelection) {
+        handleDone();
         return;
       }
-      emit("done", result.toDataURL(state.imageType));
+      cropperSelection.$toCanvas(props.croppedOptions).then((canvas) => {
+        if (props.toBlob) {
+          canvas.toBlob((blob) => {
+            handleDone(blob);
+          }, imageType);
+        } else {
+          handleDone(canvas.toDataURL(imageType));
+        }
+      }).catch((e) => {
+        console.error(e);
+      });
     };
     watch(
-      () => props.src,
-      (src) => {
-        if (src) {
-          if (state.instance) {
-            state.instance.replace(src);
-          } else {
-            nextTick(() => {
-              render();
-            });
-          }
-        } else {
-          destroy();
+      () => props.imageType,
+      (type) => {
+        if (type) {
+          imageType = type;
         }
       }
     );
     watch(
-      () => props.imageType,
-      (value) => {
-        if (value) {
-          state.imageType = value;
+      () => props.src,
+      (src) => {
+        if (!src) {
+          destroy();
+          return;
         }
+        const cropperImage = getCropperImage();
+        if (!cropperImage) {
+          render(src);
+          return;
+        }
+        cropperImage.src = src;
       }
     );
     onMounted(() => {
-      props.src && render();
+      if (props.src) {
+        render(props.src);
+      }
     });
     onBeforeUnmount(() => {
       destroy();
@@ -138,26 +184,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["ele-cropper", { "is-responsive": unref(isResponsive) }])
       }, [
-        createElementVNode("div", _hoisted_1, [
-          createElementVNode("div", {
-            class: "ele-cropper-image",
-            style: normalizeStyle({ height: _ctx.height })
-          }, [
-            createElementVNode("img", {
-              ref_key: "imageRef",
-              ref: imageRef,
-              src: _ctx.src,
-              style: { display: "none" }
-            }, null, 8, _hoisted_2)
-          ], 4),
-          _ctx.preview ? (openBlock(), createBlock(CropperPreview, {
-            key: 0,
-            ref_key: "previewRef",
-            ref: previewRef,
-            previewWidth: _ctx.previewWidth,
-            aspectRatio: _ctx.options ? _ctx.options.aspectRatio : void 0
-          }, null, 8, ["previewWidth", "aspectRatio"])) : createCommentVNode("", true)
-        ]),
+        createElementVNode("div", {
+          ref_key: "containerRef",
+          ref: containerRef,
+          class: "ele-cropper-main",
+          style: normalizeStyle({ height: _ctx.height })
+        }, null, 4),
         createVNode(CropperTools, {
           tools: _ctx.tools,
           accept: _ctx.accept,
@@ -165,19 +197,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           tooltip: _ctx.tooltip,
           tooltipProps: _ctx.tooltipProps,
           beforeUploadClick: _ctx.beforeUploadClick,
-          onZoomIn: handleZoomIn,
-          onZoomOut: handleZoomOut,
-          onMoveLeft: handleMoveLeft,
-          onMoveRight: handleMoveRight,
-          onMoveUp: handleMoveUp,
-          onMoveDown: handleMoveDown,
-          onRotateLeft: handleRotateLeft,
-          onRotateRight: handleRotateRight,
-          onFlipX: handleFlipX,
-          onFlipY: handleFlipY,
-          onReset: handleReset,
-          onUpload: handleUpload,
-          onOk: handleOk
+          onAction: handleAction,
+          onUpload: handleUpload
         }, null, 8, ["tools", "accept", "locale", "tooltip", "tooltipProps", "beforeUploadClick"])
       ], 2);
     };

package/es/ele-cropper/props.d.ts

@@ -1,6 +1,7 @@
 import { PropType, ExtractPropTypes } from 'vue';
+import { CropperOptions, CropperSelection, default as Cropper } from 'cropperjs';
 import { EleTooltipProps } from '../ele-app/plus';
-import { CropperOptions, CroppedOptions, BeforeUploadClick, CropperLocale } from './types';
+import { BeforeUploadClick, CropperLocale } from './types';
 
 /**
  * 属性
@@ -10,7 +11,7 @@ export declare const cropperProps: {
     height: StringConstructor;
     /** 图片地址 */
     src: StringConstructor;
-    /** 图片地址对应的图片类型,如'image/jpeg' */
+    /** 图片地址对应的图片类型, 如 'image/jpeg' */
     imageType: {
         type: StringConstructor;
         default: string;
@@ -35,18 +36,20 @@ export declare const cropperProps: {
         type: NumberConstructor;
         default: number;
     };
-    /** 是否返回blob数据 */
+    /** 是否返回 blob 数据 */
     toBlob: BooleanConstructor;
-    /** cropperjs的参数 */
+    /** cropperjs 参数 */
     options: PropType<CropperOptions>;
-    /** cropperjs裁剪方法的参数 */
-    croppedOptions: PropType<CroppedOptions>;
-    /** 是否需要tooltip */
+    /** cropperjs 裁剪方法参数 */
+    croppedOptions: PropType<Parameters<CropperSelection["$toCanvas"]>[0]>;
+    /** 裁剪比例 */
+    aspectRatio: NumberConstructor;
+    /** 是否需要 tooltip */
     tooltip: {
         type: BooleanConstructor;
         default: boolean;
     };
-    /** tooltip属性 */
+    /** tooltip 属性 */
     tooltipProps: PropType<EleTooltipProps>;
     /** 上传按钮点击前的钩子 */
     beforeUploadClick: PropType<BeforeUploadClick>;
@@ -63,6 +66,8 @@ export type CropperProps = ExtractPropTypes<typeof cropperProps>;
  * 事件
  */
 export declare const cropperEmits: {
+    /** 初始化完成事件 */
+    init: (_cropperInstance: Cropper) => boolean;
     /** 裁剪完成事件 */
     done: (_result?: Blob | string | null) => boolean;
 };