Kaynağa Gözat

feat(product-monitor): 为评价星级添加数据悬停提示

- 在 DataTableSlot 组件中,为每个星级的进度条添加了 el-tooltip 组件
WanGxC 10 ay önce
ebeveyn
işleme
bb1da165ad

+ 10 - 8
src/views/product-manage/product-monitor/component/DataTableSlot.vue

@@ -161,14 +161,16 @@ function goto() {
     <div v-else-if="field === 'stars'" class="flex flex-col font-normal" style="min-width: 170px">
       <div v-for="i in [5,4,3,2,1]" :key="i" class="w-full flex items-center" style="max-height: 15px;">
         <span class="w-10 text-right mr-2 italic">{{ i }}星</span>
-        <el-progress
-            :color="'#3A8EE6'"
-            :percentage="row.goods.ratings > 0 ? Math.round(row.goods[`ratings${i}`] / row.goods.ratings * 100) : 0"
-            :stroke-width="10"
-            class="flex-1"
-            striped
-            striped-flow
-        />
+        <el-tooltip :content="String(row.goods[`ratings${ i }`])" :show-after="300" effect="dark" placement="top">
+          <el-progress
+              :color="'#3A8EE6'"
+              :percentage="row.goods.ratings > 0 ? Math.round(row.goods[`ratings${i}`] / row.goods.ratings * 100) : 0"
+              :stroke-width="10"
+              class="flex-1"
+              striped
+              striped-flow
+          />
+        </el-tooltip>
       </div>
     </div>
     <div v-else-if="field === 'all_stars'" class="flex flex-col font-normal" style="min-width: 170px">