el- progress自定义样式

最新推荐文章于 2025-04-21 08:00:00 发布

吃不胖的猫o(=^ェ^=)m

最新推荐文章于 2025-04-21 08:00:00 发布

阅读量6.3k

点赞数 3

分类专栏： Element UI 文章标签： css

本文链接：https://blog.csdn.net/yueqin0512/article/details/119184278

版权

Element UI 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何自定义Element UI的el-progress组件样式，包括设置进度条的宽度、高度、颜色、底色以及百分比显示样式。通过使用text-inside属性、percentage属性和stroke-width属性，可以实现对进度条的全面定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认样式：
在这里插入图片描述
我想要的效果：

进度条的宽度、高度自定义
颜色自定义
底色自定义
百分比样式自定义

官方属性：
在这里插入图片描述比较常用的就是：

text-inside 控制百分比在进度条里（只有是type=line时有效）
percentage 百分比数值，整数this.ylUsage = parseInt(this.usageRate.ylUsage)
stroke-width：进度条宽度（粗细），官方例子20、22、24、26

<el-progress style="width: 100%;" class="el-progress__text" :stroke-width="20" :percentage="ylUsage" />

<style lang="scss" scoped>

// 百分比样式
::v-deep .el-progress__text {
    color: #808080;
    margin-left: 15px;
}
::v-deep .el-progress {
    margin-left: 0;
}
// 百进度条底色
::v-deep .el-progress-bar__outer {
    background-color: rgba(0, 0, 0, 0.15);
}
// 百进度条颜色
::v-deep .el-progress-bar__inner {
    background-color: #5f86b2;
}

最后长这样啦
在这里插入图片描述