perf(cropper-avatar): code optimization

Vben
1 parent b7c7c468
Showing 3 changed files with 7 additions and 9 deletions
src/components/Cropper/src/Cropper.vue
src/components/Cropper/src/CropperAvatar.vue
src/views/demo/comp/cropper/index.vue
@@ -16,7 +16,7 @@
   import Cropper from 'cropperjs';
   import 'cropperjs/dist/cropper.css';
   import { useDesign } from '/@/hooks/web/useDesign';
-  import { useThrottleFn } from '@vueuse/shared';
+  import { useDebounceFn } from '@vueuse/shared';
   type Options = Cropper.Options;
@@ -47,7 +47,6 @@
     src: { type: String, required: true },
     alt: { type: String },
     circled: { type: Boolean, default: false },
-
     realTimePreview: { type: Boolean, default: true },
     height: { type: [String, Number], default: '360px' },
     crossorigin: {
@@ -68,7 +67,7 @@
       const isReady = ref(false);
       const { prefixCls } = useDesign('cropper-image');
-      const throttleRealTimeCroppered = useThrottleFn(realTimeCroppered, 80);
+      const debounceRealTimeCroppered = useDebounceFn(realTimeCroppered, 80);
       const getImageStyle = computed((): CSSProperties => {
         return {
@@ -107,13 +106,13 @@
             emit('ready', cropper.value);
           },
           crop() {
-            throttleRealTimeCroppered();
+            debounceRealTimeCroppered();
           },
           zoom() {
-            throttleRealTimeCroppered();
+            debounceRealTimeCroppered();
           },
           cropmove() {
-            throttleRealTimeCroppered();
+            debounceRealTimeCroppered();
           },
           ...props.options,
         });
@@ -18,9 +18,8 @@
   import { useI18n } from '/@/hooks/web/useI18n';
   const props = {
-    src: { type: String, required: true },
     width: { type: [String, Number], default: '200px' },
-    uploadApi: { type: Function as PropType<({ file: Blob, name: stirng }) => Promise<void>> },
+    uploadApi: { type: Function as PropType<({ file: Blob, name: string }) => Promise<void>> },
   };
   export default defineComponent({
 <template>
   <PageWrapper title="图片裁剪示例" content="需要开启测试接口服务才能进行上传测试！">
     <CollapseContainer title="头像裁剪">
-      <CropperAvatar :src="cropperImg" :uploadApi="uploadApi" />
+      <CropperAvatar :uploadApi="uploadApi" />
     </CollapseContainer>
     <CollapseContainer title="矩形裁剪" class="my-4">