图片裁切参数调整

src/components/avatar/cropper.vue

@@ -29,13 +29,15 @@ interface Options {
 }
 // 父组件传参props
 const props = defineProps<{
-  dialogVisible: boolean
+  modelValue: boolean
   circleUrl: string
 }>()
+const emits = defineEmits(['closeAvatarDialog', 'update:modelValue'])
 
-const dialogVisible = ref(props.dialogVisible)
-
-const emits = defineEmits(['closeAvatarDialog'])
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: value => emits('update:modelValue', value)
+})
 // 裁剪组件需要使用到的参数
 const options = reactive<Options>({
   img: props.circleUrl, // 需要剪裁的图片

src/views/user/UserInfo.vue

@@ -356,7 +356,7 @@ const rowClassName = ({ row }: { row: any }) => {
   </el-container>
   <AvatarCropper
     v-if="dialogVisible"
-    :dialogVisible="dialogVisible"
+    v-model="dialogVisible"
     :circleUrl="circleUrl"
     @closeAvatarDialog="closeAvatarDialog"
   ></AvatarCropper>