perf: 用户管理-上传头像中弹框关闭立刻销毁内部`popover`，避免延迟关闭影响用户体验

src/views/system/user/upload.vue

@@ -10,6 +10,7 @@ const props = defineProps({
 const emit = defineEmits(["cropper"]);
 
 const infos = ref();
+const popoverRef = ref();
 const refCropper = ref();
 const showPopover = ref(false);
 const cropperImg = ref<string>("");
@@ -19,11 +20,22 @@ function onCropper({ base64, blob, info }) {
   cropperImg.value = base64;
   emit("cropper", { base64, blob, info });
 }
+
+function hidePopover() {
+  popoverRef.value.hide();
+}
+
+defineExpose({ hidePopover });
 </script>
 
 <template>
   <div v-loading="!showPopover" element-loading-background="transparent">
-    <el-popover :visible="showPopover" placement="right" width="18vw">
+    <el-popover
+      ref="popoverRef"
+      :visible="showPopover"
+      placement="right"
+      width="18vw"
+    >
       <template #reference>
         <div class="w-[18vw]">
           <ReCropper

src/views/system/user/utils/hook.tsx

@@ -351,6 +351,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
     });
   }
 
+  const cropRef = ref();
   /** 上传头像 */
   function handleUpload(row) {
     addDialog({
@@ -360,6 +361,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       closeOnClickModal: false,
       contentRenderer: () =>
         h(croppingUpload, {
+          ref: cropRef,
           imgSrc: row.avatar,
           onCropper: info => (avatarInfo.value = info)
         }),
@@ -368,7 +370,8 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
         // 根据实际业务使用avatarInfo.value和row里的某些字段去调用上传头像接口即可
         done(); // 关闭弹框
         onSearch(); // 刷新表格数据
-      }
+      },
+      closeCallBack: () => cropRef.value.hidePopover()
     });
   }