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

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

@@ -1,79 +1,94 @@
 <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"
-  />
-  <image
-    v-else
+         @tap="handleTap" />
+  <!-- 如果存在错误或者图片路径无值，则显示默认图片元素 -->
+  <image v-else
          :src="defaultImgPath"
          :style="imgStyle"
          :class="classList"
-    @tap="handleTap"
-  />
+         @tap="handleTap" />
 </template>
 
 <script setup>
-const props = defineProps({
+  // 使用 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
     }
-})
+  })
 
-const imgPath = computed(() => {
+  // 通过计算属性 imgPath，调用 util.checkFileUrl 函数来处理传入的图片路径（props.src），
+  // 可能会对路径进行合法性检查等操作后返回合适的路径
+  const imgPath = computed(() => {
     return util.checkFileUrl(props.src)
-})
-const defaultImgPath = computed(() => {
+  })
+  // 通过计算属性 defaultImgPath 根据 defaultImgType 的值来确定默认图片的路径
+  // 如果 defaultImgType 为 true，则返回头像图片的路径，否则返回默认图片的路径
+  const defaultImgPath = computed(() => {
     if (props.defaultImgType) return '/static/images/icon/head04.png'
     return '/static/images/icon/def.png'
-})
+  })
 
-const emit = defineEmits(['imgError', 'imgLoad', 'handleTap'])
-const isError = ref(false)
-const imgError = () => {
+  // 使用 defineEmits 定义组件向外触发的事件
+  const emit = defineEmits(['imgError', 'imgLoad', 'handleTap'])
+  // 定义一个响应式的变量 isError，初始值为 false，用于标记图片是否出现加载错误
+  const isError = ref(false)
+  // 图片加载出错时的处理函数
+  // 将 isError 设置为 true，表示出现错误，并触发 'imgError' 事件向外通知
+  const imgError = () => {
     isError.value = true
     emit('imgError')
-}
+  }
 
-const imgLoad = (e) => {
+  // 图片加载成功时的处理函数，触发 'imgLoad' 事件，并传递加载成功的相关事件对象（e）向外通知
+  const imgLoad = (e) => {
     emit('imgLoad', e)
-}
+  }
 
-const handleTap = () => {
+  // 图片被点击时的处理函数，触发 'handleTap' 事件向外通知
+  const handleTap = () => {
     emit('handleTap')
-}
+  }
 </script>
 
 <style scoped>
-image {
+  /* 为 image 标签设置样式，使其宽度和高度都占满父元素的 100% */
+  image {
     width: 100%;
     height: 100%;
-}
+  }
 </style>