refactor: use setup refactor

src/views/components/cropping/index.vue

@@ -1,3 +1,27 @@
+<script setup lang="ts">
+import { ref, nextTick, getCurrentInstance } from "vue";
+import Cropper from "/@/components/ReCropper";
+import img from "./picture.jpeg";
+
+const instance = getCurrentInstance();
+let info = ref<object>("");
+let cropperImg = ref<string>("");
+
+const onCropper = (): void => {
+  nextTick(() => {
+    instance.refs.refCropper.cropper.getCroppedCanvas().toBlob(blob => {
+      let fileReader: FileReader = new FileReader();
+      fileReader.onloadend = (e: ProgressEvent) => {
+        // @ts-ignore
+        cropperImg.value = e.target.result;
+        info.value = instance.refs.refCropper.cropper.getData();
+      };
+      fileReader.readAsDataURL(blob);
+    }, "image/jpeg");
+  });
+};
+</script>
+
 <template>
   <div style="margin: 10px">
     <div class="cropper-container">
@@ -9,44 +33,6 @@
   </div>
 </template>
 
-<script lang="ts">
-import { ref, nextTick, getCurrentInstance } from "vue";
-import Cropper from "/@/components/ReCropper";
-import img from "./picture.jpeg";
-
-export default {
-  name: "reCropping",
-  components: {
-    Cropper
-  },
-  setup() {
-    const instance = getCurrentInstance();
-    let info = ref("");
-    let cropperImg = ref("");
-
-    const onCropper = (): void => {
-      nextTick(() => {
-        instance.refs.refCropper.cropper.getCroppedCanvas().toBlob(blob => {
-          let fileReader: FileReader = new FileReader();
-          fileReader.onloadend = (e: any) => {
-            cropperImg.value = e.target.result;
-            info.value = instance.refs.refCropper.cropper.getData();
-          };
-          fileReader.readAsDataURL(blob);
-        }, "image/jpeg");
-      });
-    };
-
-    return {
-      img,
-      info,
-      cropperImg,
-      onCropper
-    };
-  }
-};
-</script>
-
 <style scoped>
 .cropper-container {
   display: flex;