vue2项目里ElementUI的（el-progress）进度条如何实现渐变

最新推荐文章于 2024-08-20 08:00:00 发布

热爱前端，学习前端

最新推荐文章于 2024-08-20 08:00:00 发布

阅读量679

点赞数 2

分类专栏： vue问题文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/weixin_61972561/article/details/136411991

版权

vue问题专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何使用ElementUI中的el-progress组件，并展示了如何自定义其外观，包括宽度、背景颜色和渐变效果，以及设置了40%的进度显示。

摘要由CSDN通过智能技术生成

<div><el-progress :percentage="percentage"></el-progress></div>

div {
            padding-top: 5px;
            /deep/ .el-progress-bar {
              width: 110px;
            }
            /deep/ .el-progress-bar__outer {
              background-color: #000;
            }
            /deep/ .el-progress-bar__inner {
              background: linear-gradient(90deg, #a0cded 0%, #cdaeed 100%);
            }
            /deep/ .el-progress__text {
              font-size: 10px !important;
            }
          }