Element UI 自定义环形进度条里的内容
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
实现思路
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来实现自定义内容在环形进度条内居中
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:5 个月前 )
c345bb45
9 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 9 个月前
更多推荐
已为社区贡献8条内容
所有评论(0)