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