perf: 优化演示页面

src/views/components/cropping/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="tsx">
-import { ref } from "vue";
 import avatar from "./avatar.png";
+import { ref, onBeforeUnmount } from "vue";
 import ReCropper from "@/components/ReCropper";
 import { formatBytes } from "@pureadmin/utils";
 
@@ -9,6 +9,7 @@ defineOptions({
 });
 
 const infos = ref();
+const popoverRef = ref();
 const refCropper = ref();
 const showPopover = ref(false);
 const cropperImg = ref<string>("");
@@ -18,6 +19,10 @@ function onCropper({ base64, blob, info }) {
   infos.value = info;
   cropperImg.value = base64;
 }
+
+onBeforeUnmount(() => {
+  popoverRef.value.hide();
+});
 </script>
 
 <template>
@@ -25,7 +30,7 @@ function onCropper({ base64, blob, info }) {
     <template #header>
       <div class="card-header">
         <span class="font-medium">
-          图片裁剪组件，基于开源的
+          图片裁剪，基于开源的
           <el-link
             href="https://fengyuanchen.github.io/cropperjs/"
             target="_blank"
@@ -37,39 +42,41 @@ function onCropper({ base64, blob, info }) {
         </span>
       </div>
     </template>
-    <el-popover
-      :visible="showPopover"
-      placement="right"
-      width="300px"
-      :teleported="false"
-    >
-      <template #reference>
-        <ReCropper
-          ref="refCropper"
-          class="w-[30vw]"
-          :src="avatar"
-          circled
-          @cropper="onCropper"
-          @readied="showPopover = true"
-        />
-      </template>
-      <div class="flex flex-wrap justify-center items-center text-center">
-        <el-image
-          v-if="cropperImg"
-          :src="cropperImg"
-          :preview-src-list="Array.of(cropperImg)"
-          fit="cover"
-        />
-        <div v-if="infos" class="mt-1">
-          <p>
-            图像大小：{{ parseInt(infos.width) }} ×
-            {{ parseInt(infos.height) }}像素
-          </p>
-          <p>
-            文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
-          </p>
+    <div v-loading="!showPopover" element-loading-background="transparent">
+      <el-popover
+        ref="popoverRef"
+        :visible="showPopover"
+        placement="right"
+        width="300px"
+      >
+        <template #reference>
+          <ReCropper
+            ref="refCropper"
+            class="w-[30vw]"
+            :src="avatar"
+            circled
+            @cropper="onCropper"
+            @readied="showPopover = true"
+          />
+        </template>
+        <div class="flex flex-wrap justify-center items-center text-center">
+          <el-image
+            v-if="cropperImg"
+            :src="cropperImg"
+            :preview-src-list="Array.of(cropperImg)"
+            fit="cover"
+          />
+          <div v-if="infos" class="mt-1">
+            <p>
+              图像大小：{{ parseInt(infos.width) }} ×
+              {{ parseInt(infos.height) }}像素
+            </p>
+            <p>
+              文件大小：{{ formatBytes(infos.size) }}（{{ infos.size }} 字节）
+            </p>
+          </div>
         </div>
-      </div>
-    </el-popover>
+      </el-popover>
+    </div>
   </el-card>
 </template>