实现思路

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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐