Merge branch 'main' of https://bdgit.educoder.net/pvtfxms7o/yudao

front-end/mall4uni/src/components/img-show/img-show.vue

@@ -1,77 +1,92 @@
 <template>
-  <image
+  <!-- 根据条件判断显示不同的图片元素 -->
-    v-if="!isError && imgPath"
+  <!-- 如果不存在错误（isError为false）且图片路径（imgPath）有值，则显示此图片元素 -->
+  <image v-if="!isError && imgPath"
          :src="imgPath"
          :style="imgStyle"
          :class="classList"
          :mode="imgMode"
          @error="imgError"
          @load="imgLoad"
-    @tap="handleTap"
+         @tap="handleTap" />
-  />
+  <!-- 如果存在错误或者图片路径无值，则显示默认图片元素 -->
-  <image
+  <image v-else
-    v-else
          :src="defaultImgPath"
          :style="imgStyle"
          :class="classList"
-    @tap="handleTap"
+         @tap="handleTap" />
-  />
 </template>
 
 <script setup>
+  // 使用 defineProps 定义组件接收的属性（props）
   const props = defineProps({
+    // 图片的源路径，类型为字符串，默认值为空字符串
     src: {
       type: String,
       default: ''
     },
+    // 图片的显示模式，类型为字符串，默认值为'scaleToFill'
     imgMode: {
       type: String,
       default: 'scaleToFill'
     },
+    // 图片应用的类名列表，类型为数组，默认值是一个空数组
     classList: {
       type: Array,
       default: () => {
         return []
       }
     },
+    // 图片的内联样式，类型为对象，默认值是一个空对象
     imgStyle: {
       type: Object,
       default: () => {
         return {}
       }
     },
-  // 默认失败图片类型, false为默认图片, true为默认头像图片
+    // 默认失败图片类型，false为默认图片，true为默认头像图片，类型为布尔值，默认值为false
     defaultImgType: {
       type: Boolean,
       default: false
     }
   })
 
+  // 通过计算属性 imgPath，调用 util.checkFileUrl 函数来处理传入的图片路径（props.src），
+  // 可能会对路径进行合法性检查等操作后返回合适的路径
   const imgPath = computed(() => {
     return util.checkFileUrl(props.src)
   })
+  // 通过计算属性 defaultImgPath 根据 defaultImgType 的值来确定默认图片的路径
+  // 如果 defaultImgType 为 true，则返回头像图片的路径，否则返回默认图片的路径
   const defaultImgPath = computed(() => {
     if (props.defaultImgType) return '/static/images/icon/head04.png'
     return '/static/images/icon/def.png'
   })
 
+  // 使用 defineEmits 定义组件向外触发的事件
   const emit = defineEmits(['imgError', 'imgLoad', 'handleTap'])
+  // 定义一个响应式的变量 isError，初始值为 false，用于标记图片是否出现加载错误
   const isError = ref(false)
+  // 图片加载出错时的处理函数
+  // 将 isError 设置为 true，表示出现错误，并触发 'imgError' 事件向外通知
   const imgError = () => {
     isError.value = true
     emit('imgError')
   }
 
+  // 图片加载成功时的处理函数，触发 'imgLoad' 事件，并传递加载成功的相关事件对象（e）向外通知
   const imgLoad = (e) => {
     emit('imgLoad', e)
   }
 
+  // 图片被点击时的处理函数，触发 'handleTap' 事件向外通知
   const handleTap = () => {
     emit('handleTap')
   }
 </script>
 
 <style scoped>
+  /* 为 image 标签设置样式，使其宽度和高度都占满父元素的 100% */
   image {
     width: 100%;
     height: 100%;