Procházet zdrojové kódy

refactor(product-manage): 优化商品列表图片加载失败处理

- 替换自定义样式为 Element Plus 图标组件
- 更新图片加载失败时的错误处理模板
- 调整图片样式以适应新设计
WanGxC před 6 měsíci
rodič
revize
e2793de286
1 změnil soubory, kde provedl 10 přidání a 5 odebrání
  1. 10 5
      src/views/product-manage/component/ProductInfo.vue

+ 10 - 5
src/views/product-manage/component/ProductInfo.vue

@@ -3,7 +3,7 @@
  * @Description: 商品列表-商品信息插槽
  * @Author: Cheney
  */
-import { CopyDocument } from '@element-plus/icons-vue';
+import { CopyDocument, Picture as IconPicture } from '@element-plus/icons-vue';
 import { handleCopy } from '/@/utils/useCopyText';
 
 
@@ -49,10 +49,15 @@ const props = defineProps({
         </template>
       </el-tooltip>
     </div>
-    <el-image v-else :style="`width: ${imgWidth}px; margin-right: 5px;`" lazy>
-      <div slot="error" class="image-slot">
-        <i class="el-icon-picture-outline"></i>
-      </div>
+    <el-image v-else :style="`width: ${imgWidth}px; margin-right: 5px; font-size: 2.7rem;`" lazy>
+      <!--<div slot="error" class="image-slot">-->
+      <!--  <i class="el-icon-picture-outline"></i>-->
+      <!--</div>-->
+      <template #error>
+        <div class="image-slot">
+          <el-icon><icon-picture /></el-icon>
+        </div>
+      </template>
     </el-image>
     <div class="text-left">
       <el-tooltip :content="item.title" :disabled="showTitleTooltip || !item.title" effect="dark" placement="top-start"