elementUI在环形进度条el-progress中添加图标

最新推荐文章于 2025-07-14 14:58:48 发布

原创

最新推荐文章于 2025-07-14 14:58:48 发布 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

这篇博客介绍了如何在'饿了么'组件库的圆形进度条上通过CSS绝对定位技术，添加并调整中心图标的位置和大小，以达到自定义视觉效果。示例代码展示了如何结合使用<div>和<img>元素以及CSS样式来实现这一目的。

效果图

在这里插入图片描述
由于’饿了么’进度条不支持中心添加图标所以我们采用最原始的’父相子绝’来调整位置和大小

<div class="progress-div">
                              <el-progress
                                type="circle"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

商朝

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

elementplus使用el-progress进度条实现末尾自定义图片

weixin_45960031的博客

03-07

1204

elementplus使用el-progress进度条实现末尾自定义图片

vue 中 进度条小球

wpb1109的博客

08-23

465

交叉 <template> <div class="about"> <div class="line"></div> <div class="line active"></div> <div class="small-ball" @touchstart="FnStart"></div> <div class="small-ball ac" @touchstart="F

参与评论您还未登录，请先登录后发表或查看评论

element Progress 环形进度条渐变样式修改

WMW_wmw的博客

10-11

1432

最终效果图 <el-progress class="circle0" :width="140" type="circle" :stroke-width="20" percentage="测试" ></el-progress> <svg width="100%" height="0"> <defs> <linearGradient id="write" x1="0%" y1="

elementui el-progress进度条尾端自定义图片

day_z的博客

07-25

1485

el-progress进度条尾端自定义图片。

如何给ProgressBar设置进度标识

t7g367的博客

06-02

790

带进度标识的进度条ProgressBar 自定义MyProgress继承ProgressBar,复写 @Override public synchronized void setProgress(int progress) { // TODO Auto-generated method stub setText(progress); super.setProgress(progress); } 在setText(int progress)中设置回调 /** * 设

＜ ElementUi组件库： el-progress 进度条Bug及样式调整＞

热门推荐

一个平平无奇的技术宅

05-25

1万+

在 Vue + elementUi 开发中，在使用Progress进度条时，往往会因为需求原型太过花里胡哨而烦恼（原本的样式并不能满足需求）。为什么呢？因为这个组件elementUi并没有提供过多的自定义属性及插槽，对的，插槽也没有，不能自定义进度条文本样式。即使在elementUi的文档里面写了属性，但是实际使用并未生效（怀疑是bug）。Tips: 基于 elementUi来说，好像elementUi - Plus升级了，修复了bug，也增加了对应的属性、开放了插槽！

【element-ui】el-progress 前端自定义进度条

花椒和蕊的博客

11-08

4059

自定义进度条

精选资源

el-select-tree:ElementUI的el-select与el-tree结合

05-07

ElementUI的el-select与el-tree结合在一起。在线示例用法安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...

精选资源

element-ui 的el-button组件中添加自定义颜色和图标的实现方法.docx

01-13

总结来说，Element UI 的 el-button 组件中添加自定义颜色和图标的实现方法可以通过添加自定义的全局指令，并在项目公共的 js 中编写自定义的指令来实现。这是一种非常灵活和方便的方法，可以满足不同的需求和场景。

Vue + Element 实现进度条 Progress

Jonsnow595的博客

01-16

2558

Vue + Element 进度条 Progress 前言：由于在公司可视化数字大屏项目中用到了，所以在博客里记录一下！如果能帮到你，那么点个赞吧，哈哈哈话不多说，先直接上效果图，有需要的大家可借鉴借鉴。 HTML： <template> <div class="absolute-left-right-top-bottom charts-main"> <div class="content"> <div class

小程序学习02->icon图标与progress进度条

王明海的专栏

02-05

1206

一、icon icon为显示图标的组件，其属性如下所示： .wxml文件 view class="group"> block wx:for="{{iconSize}}"> icon type="success" size="{{item}}">icon> block> view> view class="group"> block wx:for=

微信小程序全栈开发实战学习三（icon组件关于图标的5个实现方案+progress组件如何自定义实现一个环形进度条？）

weixin_37365539的博客

05-27

561

icon组件关于图标的5个实现方案. 小程序官方提供icon很少，支持两种单位 px rpx 我们可以用以下5个方案来使用图标 1. 使用图片缺点：图标多会造成大量http请求；不方便修改颜色；图标放大会变虚 2. 使用精灵图（连续图片集）注意：背景图片只能使用网络图片，不能使用本地图片. 3.使用css样式绘制（不推荐） 4.使用矢量字体（最为简单有效）注意：小程序中建议使用TTF和WOFF格式的。WOFF2在低版本的IOS上会有不兼容的问题。具体方法：（这里推荐阿里巴巴矢量图库）可以前

使用element的el-progress进度条实现进度条上加一个图片并根据进度前进

最新发布

@@小旭的博客

07-14

253

实现一个带进度条和自定义内容的可视化组件。主要包含一个进度条（使用el-progress）和浮动显示区（custom-content），其中显示百分比数值和图标。CSS样式设置了响应式布局，包括进度条容器定位、自定义内容悬浮效果（限制在10%-84%范围内移动以防溢出），以及底部目标区域的图文排版。组件采用flex布局，具有平滑过渡动画，百分比数值使用DINPro字体突出显示，整体配色以蓝色为主。底部显示已完成金额和目标金额的对比信息。

el-progress 伪装进度条

yjl13598765406的博客

09-29

557

el-progress 伪装进度条

Element UI中自定义环形el-progress 更改背景、添加内外边框等

Ardencyz

08-25

3564

先看效果图： Element UI 官网示例：更改后效果：引入el- progress <el-progress type="circle" class="load-factor" :width="70" :stroke-width="10" :color="cir

CSS转圈动画&&ele-ui中 Progress 圆形进度条

weixin_63643304的博客

09-27

816

【代码】CSS转圈动画&&ele-ui中 Progress 圆形进度条。

带图片指示器的进度条

博客，是nsacer先森的

08-14

2172

带有图片指示器的进度条

Vue+Element UI el-progress进度条内显示自定义数字及文字

蓝胖子的博客

04-29

4279

Vue+Element UI el-progress进度条内显示自定义数字及文字

vue3中进度条上加高亮圆点

wch19960518的博客

06-06

700

小圆点基于进度条定位（left）。

el-progress多个环形进度条 间隔开

10-29

在Ant Design Vue (Vue版本的Ant Design) 中，`el-progress`组件可以创建多个独立的环形进度条，并通过CSS或者布局调整让它们之间保持一定的间距。你可以这样做： 1. 创建多个`el-progress`实例，每个代表一个单独的环形进度条： ```html <template> <div class="progress-container"> <el-progress :percentage="progress1" type="circle"></el-progress> <el-progress :percentage="progress2" type="circle" :class="{ spacing: true }"></el-progress>  </div> </template> <style scoped> .progress-container { display: flex; justify-content: space-between; /* 或者设置flex-wrap: wrap 和 margin-right: someValue */ } .spacing { margin-left: 10px; /* 根据需要调整间距值 */ } </style> ``` 在这个例子中，`spacing`类用于添加额外的间距。你可以根据实际需求调整样式。