fix: close modal

yudao-ui-admin-vue3/src/components/Cropper/src/CopperModal.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <Dialog
       v-model="dialogVisible"
       :title="t('cropper.modalTitle')"
@@ -110,6 +111,7 @@
         <el-button type="primary" @click="handleOk">{{ t('cropper.okText') }}</el-button>
       </template>
     </Dialog>
+  </div>
 </template>
 <script setup lang="ts">
 import { useDesign } from '@/hooks/web/useDesign'
@@ -173,7 +175,6 @@ function handlerToolbar(event: string, arg?: number) {
 async function handleOk() {
   const blob = dataURLtoBlob(previewSource.value)
   emit('uploadSuccess', { source: previewSource.value, data: blob, filename: filename })
-  closeModal()
 }
 function openModal() {
   dialogVisible.value = true

yudao-ui-admin-vue3/src/components/Cropper/src/CropperAvatar.vue

@@ -4,7 +4,11 @@
     <el-button :class="`${prefixCls}-upload-btn`" @click="open()" v-if="showBtn">
       {{ btnText ? btnText : t('cropper.selectImage') }}
     </el-button>
-    <CopperModal ref="cropperModel" @upload-success="handleUploadSuccess" :srcValue="sourceValue" />
+    <CopperModal
+      ref="cropperModelRef"
+      @upload-success="handleUploadSuccess"
+      :srcValue="sourceValue"
+    />
   </div>
 </template>
 <script setup lang="ts">
@@ -29,7 +33,7 @@ const prefixCls = getPrefixCls('cropper-avatar')
 const message = useMessage()
 const { t } = useI18n()
 
-const cropperModel = ref()
+const cropperModelRef = ref()
 
 watchEffect(() => {
   sourceValue.value = props.value
@@ -49,8 +53,15 @@ function handleUploadSuccess({ source, data, filename }) {
 }
 
 function open() {
-  cropperModel.value.openModal()
+  cropperModelRef.value.openModal()
 }
+function close() {
+  cropperModelRef.value.closeModal()
+}
+defineExpose({
+  open,
+  close
+})
 </script>
 <style lang="scss" scoped>
 $prefix-cls: #{$namespace}--cropper-avatar;

yudao-ui-admin-vue3/src/views/Profile/components/UserAvatar.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="change-avatar">
     <CropperAvatar
+      ref="cropperRef"
       :value="avatar"
       :showBtn="false"
       @change="handelUpload"
@@ -10,7 +11,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { CropperAvatar } from '@/components/Cropper'
 import { uploadAvatarApi } from '@/api/system/user/profile'
@@ -21,8 +22,10 @@ const avatar = computed(() => {
   return props.img
 })
 
+const cropperRef = ref()
 const handelUpload = async ({ data }) => {
   await uploadAvatarApi({ avatarFile: data })
+  cropperRef.value.close()
 }
 </script>