elementui进度条如何设置_ElementUI之Progress进度条底色设置

xiao9469 · 发表于 2022-6-10 18:35:48

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

ElementUI中Progress进度条组件官网给了如下属性：

这里的color很好理解就是显示实际进度的颜色(个人觉得叫背景色不太好)。但是官网并没有给出设置底色的属性，只给了一个默认的颜色，F12看一下：

条状的进度条很好理解，就是背景是(class="el-progress-bar__outer")的div，背景色是#ebeef5，表面的彩色进度就是(class="el-progress-bar__inner")的div；相应的颜色设置就通过class赋值就行了(ElementUI中直接赋值没有效果，需要获得盛放它的外部元素对象，然后利用“>>>” 进行赋值，其他组件也适用，详情看下面环形进度条代码例子)

环状进度条是通过svg画出来的，其中包含两个,第一个就是底部的背景圆环图，第二个是彩色进度条圆环，这里设置颜色就不是background-color属性了，而是stroke属性；下面是我的例子

这样就可以ok了。

总结使用

el-progress-bar__outer

el-progress-bar__inner

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
网站部分内容来源于网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

elementui进度条如何设置_ElementUI之Progress进度条底色设置

马上注册，免费下载更多dz插件网资源。

相关帖子

回复

More猜你喜欢

关于我们

服务支持

discuzaddons@vip.qq.com