f12研究看到數(shù)字百分比是0的時候 元素就在最左邊橄仆,
100的時候元素就在最右邊歌豺,50的時候就在進度刻度線的中間桅滋,
還以為實現(xiàn)很復(fù)雜,甚至看了下源碼是怎么計算百分比位置的控制
其實很簡單
left 與 transform x軸的值與百分比保持一致就行了既绩。
根本原因是沒有搞懂 transform 的用法
style="left: 60%;transform: translate(-60%, 0%);"
完整代碼
<div class="progress-statistics-box">
<div
class="tooltip"
style="left: 60%;transform: translate(-60%, 0%);"
>
¥0
</div>
<van-progress
:percentage="60"
stroke-width="12"
:show-pivot="true"
text-color="#983A05"
pivot-color="rgba(255, 255, 255, 0)"
color="linear-gradient(90deg, #FEC842 0%, #FE792A 100%)"
track-color="#FFFFFF"
class="progress-box"
style="border: 1px solid #f0cda6;border-radius: 7px;"
>
</van-progress>
</div>
less
.progress-statistics-box {
width: 278px;
padding-left: 2px;
margin-top: 6px;
position: relative;
.progress-box {
width: 278px;
}
.tooltip {
width: fit-content;
height: 17px;
background: #febf3f;
border-radius: 4px 4px 4px 4px;
box-sizing: border-box;
padding: 0 4px;
margin-bottom: 20px;
font-size: 12px;
font-family: DIN-Medium, DIN;
font-weight: 500;
color: #ffffff;
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 10px;
}
.tooltip:after {
content: "";
position: absolute;
bottom: -3px;
left: 0%;
right: 0;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 3px 4px 0 4px;
border-color: #febf3f transparent transparent transparent;
}
}
https://vant-contrib.gitee.io/vant/#/zh-CN/progress
https://gitee.com/vant-contrib/vant/blob/dev/packages/vant/src/progress/Progress.tsx
手寫進度條版
三角形箭頭始終與刻度線對齊
<div class="progress_box">
<div class="progress_box_after" :style="{ width:progressNum }">
<div class="progress_box_num">{{progressNum}}</div>
</div>
</div>
.progress_box_after {
width: 1%;
min-width: 0%;
max-width: 100%;
height: 10px;
background: #1677FF;
border-radius: 10px;
display: block;
position: relative;
top: 0;
}
.progress_box_num {
width: 50px;
/* 自適應(yīng)寬度 */
/* width: fit-content; */
box-sizing: border-box;
padding: 0 10px;
height: 30px;
border-radius: 5px;
background: #1677FF;
text-align: center;
font-size: 15px;
color: #FFFFFF;
line-height: 30px;
position: absolute;
right: -25px;
/* 自適應(yīng)寬度 屏蔽上方 right */
/* right: 0;
transform: translate(50%, 0%); */
top: -40px;
}
.progress_box_num::before {
content: '';
width: 0;
height: 0;
border: 10px solid;
position: absolute;
top: 30px;
left: 0%;
right: 0;
margin: 0 auto 0;
border-color: #1677FF transparent transparent;
}