vue3中进度条上加高亮圆点

实现效果

在这里插入图片描述

小圆点基于进度条定位（left）。

实现代码

<template><!-- 这块代码实现的功能：progressData遍历的年份进度数组，展示每年完成的进度--><ul><li v-for="(item, index) in progressData" :key="item.year"><el-row :gutter="10"><el-col :span="21" class="progress-info-left">第<span>{{ index + 1 }}</span>年完成进度</el-col><el-col :span="3" style="text-align: right;">{{ handleNum(item.percentage) }}%</el-col></el-row><el-row><el-col :span="24"><el-progressref="progressRefs":text-inside="true":percentage="Number(item.percentage)"><div class="progress-dot" :style="{ left: `${calculateDotPosition(index, item.percentage)}px` }"></div> </el-progress></el-col></el-row></li></ul>
</template><script setup>
const progressWidths = ref([]); // index为当前年度索引
// percentage当前年度完成值
const calculateDotPosition = (index, percentage) => {// 非空判断if(percentage) {// progressRefs所有进度DOMprogressRefs.value.forEach((ref, index) => {  if (ref) {// 当前进度条元素的布局宽度（包括padding和border，但不包括margin）progressWidths.value[index] = ref.$el.offsetWidth;  }  });if (progressWidths.value[index] > 0) {  // 计算点的位置。// 通过将元素的宽度乘以百分值（转换为数字），然后除以100获取百分比。// 结果减去4（这块为小圆点的半径），使其居中。return (progressWidths.value[index] * Number(percentage) / 100) - 4;  } } else {return 0;  }
}
</script><style>
// 进度条
.el-progress {  position: relative; 
}
:deep(.el-progress-bar__outer) {overflow: visible;
}.progress-dot {  position: absolute;  top: -1px; width: 8px; height: 8px;  background-color: #fff; box-shadow: 0px 0px 7px 0 #98EEFF;border-radius: 50%;  }        
</style>