CSS区域 attr(data-after) 这个是关键
::v-deep .el-slider__marks-text {
margin-top: 30px;
font-size: 14px;
font-family: Source Han Sans, Source Han Sans;
font-weight: 700;
color: #3d3d3d;
line-height: 22px;
&::before {
content: '';
display: inline-block;
position: absolute;
left: 47.5%;
top: -16px;
transform: translateX(-50%);
width: 4px;
height: 14px;
background: #ffce00;
border-radius: 4px 4px 4px 4px;
}
&::after {
content: attr(data-after);
font-size: 12px;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
color: #979797;
line-height: 22px;
position: absolute;
left: 85px;
top: -59px;
width: 100px;
}
}
在 onMounted 里面执行
// 进度条 时间控制
await nextTick()
const element = document.querySelectorAll('.el-slider__marks-text')
for (let i = 0; i < element.length - 1; i++) {
element[i].setAttribute('data-after', channelDetailObj.value.timeEventCounts[i])
}
}