瀏覽代碼

perf(product-list): 优化产品标题显示逻辑

- 增加对无标题商品的处理,显示为 '--'
- 调整 tooltip 显示逻辑,无标题时不显示
- 优化 tooltip 显示延迟时间为 350毫秒
- 修复 el-link 点击问题,无标题时禁用链接
WanGxC 6 月之前
父節點
當前提交
feeca7c01c
共有 1 個文件被更改,包括 6 次插入6 次删除
  1. 6 6
      src/views/product-manage/product-list/component/ProductInfo.vue

+ 6 - 6
src/views/product-manage/product-list/component/ProductInfo.vue

@@ -48,9 +48,9 @@ const props = defineProps({
       </div>
     </el-image>
     <div class="text-left">
-      <el-tooltip :content="item.title" :disabled="showTitleTooltip" show-after="300" effect="dark"
-                  placement="top-start">
-        <el-link :href=item.url :underline="false" target="_blank" type="primary">
+      <el-tooltip :content="item.title" :disabled="showTitleTooltip || !item.title" effect="dark" placement="top-start"
+                  show-after="350">
+        <el-link :disabled="!item.title" :href="item.url" :underline="false" target="_blank" type="primary">
           <span class="line-clamp-1 text-ellipsis whitespace-normal">{{ item.title || '--' }}</span>
         </el-link>
       </el-tooltip>
@@ -60,11 +60,11 @@ const props = defineProps({
           <span style="color: #1d2129;">
             {{ item.asin || '--' }}
           </span>
-          
+
         </p>
         <el-tooltip :content="item.sku" effect="light" show-after="300">
-          <p class="m-0 p-0 line-clamp-1 text-ellipsis"> 
-            SKU: 
+          <p class="m-0 p-0 line-clamp-1 text-ellipsis">
+            SKU:
             <span style="color: #1d2129;">
               {{ item.sku || '--' }} 
             </span>