feat: 实现Tracking详情页Shipment Status模块的path超出部分使用tooltip展示

src/components/ShipmentStatus/src/ShipmentStatus.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
+import { useOverflow } from '@/hooks/useOverflow'
 
 const props = defineProps({
   data: Object
@@ -36,6 +37,10 @@ const getDateHeight = (index: number) => {
 const formatDate = (date: string) => {
   return date ? dayjs(date).format('MMM-DD-YYYY') : '--'
 }
+
+const pathRef = ref()
+
+const { isOverflow: isPathOverflow } = useOverflow(pathRef, props)
 </script>
 
 <template>
@@ -45,7 +50,7 @@ const formatDate = (date: string) => {
       :class="{
         last: !stepItem.isArrival
       }"
-      v-for="stepItem in simplexData"
+      v-for="(stepItem, index) in simplexData"
       :key="stepItem.index"
     >
       <div class="data">
@@ -53,7 +58,14 @@ const formatDate = (date: string) => {
         <div class="right-info">
           <div class="path">
             <div class="label">{{ stepItem.label }}</div>
-            <div class="detail-path">{{ stepItem.path }}</div>
+            <el-tooltip v-if="isPathOverflow?.[index]" placement="top">
+              <template #content>{{ stepItem.path }}</template>
+
+              <div ref="pathRef" class="detail-path single-line-ellipsis">{{ stepItem.path }}</div>
+            </el-tooltip>
+            <div v-else ref="pathRef" class="detail-path single-line-ellipsis">
+              {{ stepItem.path }}
+            </div>
           </div>
           <div
             class="transport-info"
@@ -202,4 +214,11 @@ const formatDate = (date: string) => {
     }
   }
 }
+.single-line-ellipsis {
+  height: 18px;
+  display: inline-block; /* 或者根据需要使用 inline-block */
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 隐藏超出部分 */
+  text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
 </style>