Element UI 自定义环形进度条里的内容
实现思路1.隐藏进度条默认的文字内容 :show-text="false"2. 使用“子绝父相”,调整top和left值来实现自定义内容在环形进度条内居中3. 为避免缩放浏览器时定位发生偏移,需固定整个容器的宽度width: 200px;最终代码<div class="circleBox"><el-progress :show-text="false" :width="120"
·
实现思路
1. 隐藏进度条默认的文字内容 :show-text="false"
2. 使用“子绝父相”,调整top和left值来实现自定义内容在环形进度条内居中
3. 为避免缩放浏览器时定位发生偏移,需固定整个容器的宽度 width: 200px;
最终代码
<div class="circleBox">
<el-progress :show-text="false" :width="120" :stroke-width="12" type="circle"
:percentage="80">
</el-progress>
<div class="circleCenter">
<div>成功率 80%</div>
</div>
</div>
自定义的内容写在 <div class="circleCenter"> 内部
相关样式如下:
.circleBox {
position: relative;
text-align: center;
width: 200px;
}
.circleCenter {
position: absolute;
top: 50px;
left: 60px;
}
通过调整.circleBox的width,进度条el-progress的width,以及.circleCenter的top和left来实现自定义内容在环形进度条内居中
更多推荐
已为社区贡献1条内容
所有评论(0)