Element UI 自定义环形进度条里的内容

简介: Element UI 自定义环形进度条里的内容

实现思路

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;
    }

目录
相关文章
|
1天前
|
前端开发
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
Element UI 【实战】纯前端对表格数据进行增删改查(内含弹窗表单、数据校验、时间日期格式)
22 6
|
22小时前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
10 1
|
22小时前
Element UI 数字输入框的实现
Element UI 数字输入框的实现
7 0
|
1天前
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
5 0
|
1天前
【亲测有效】Element UI 自定义 Notification 通知样式不生效,设置this.$notify样式不生效问题
【亲测有效】Element UI 自定义 Notification 通知样式不生效,设置this.$notify样式不生效问题
5 0
|
1天前
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ?
element UI实现输入建议下拉列表 —— el-select filterable可筛选的下拉列表 or 带输入建议的输入框 el-autocomplete ?
5 0
|
1天前
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图
5 0
|
1天前
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
5 0
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍