为MessageCard组件添加图片加载事件，更新MessageView以处理图片加载完成后的滚动事件

src/components/cards/MessageCard.vue

@@ -10,6 +10,9 @@ const props = defineProps({
   height: String,
 })
 
+// 定义事件
+const emit = defineEmits(['imageload'])
+
 // 图片是否加载完成
 const isImageLoaded = ref(false)
 
@@ -19,6 +22,7 @@ const imageLoadError = ref(false)
 // 图片加载完成
 async function imageLoaded() {
   isImageLoaded.value = true
+  emit('imageload')
 }
 
 // 链接打开新窗口

src/views/system/MessageView.vue

@@ -97,6 +97,11 @@ function compareTime(time1: string, time2: string) {
   return new Date(time1.replaceAll(/-/g, '/')).getTime() - new Date(time2.replaceAll(/-/g, '/')).getTime()
 }
 
+// 图片加载完成
+function handleImageLoad() {
+  emit('scroll')
+}
+
 onMounted(() => {
   // 组件挂载后触发一次滚动事件
   nextTick(() => {
@@ -130,7 +135,7 @@ onBeforeUnmount(() => {
         :class="msg.action == 1 ? 'flex-row align-start' : 'flex-row-reverse align-end'"
       >
         <div class="d-inline-flex flex-column" :class="msg.action == 1 ? 'align-start' : 'align-end'">
-          <MessageCard :message="msg" />
+          <MessageCard :message="msg" @imageload="handleImageLoad" />
         </div>
       </div>
     </div>