vue自定义进度条

最新推荐文章于 2024-05-23 18:55:14 发布

clmm123

最新推荐文章于 2024-05-23 18:55:14 发布

阅读量503

点赞数 1

分类专栏： vue 文章标签： vue progress

本文链接：https://blog.csdn.net/baidu_37302589/article/details/128863820

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue自定义进度条

现有进度条组件无法实现项目效果，所以就参考大佬们的写法自定义了一个，效果图如下

HTML代码

<div class="progress-bar">
  <div class="progress-bar-outer">
    <span class="progress-text" :style="{color: progressInfo.color}">项目阶段：{{statusName}}</span>
    <div class="progress-bar-inner" :style="{backgroundColor:'#4ba5f8',width: percent + '%'}"/>
  </div>
</div>

css代码

.progress-bar{
   display:inline-block;
   width: 100%;
   box-sizing: border-box; /* 盒模型的方式 */
   margin-top: 12px;
   margin-bottom: 18px;
 }

.progress-bar-outer{
   width: 100%;
   border-radius: 10px;
   background-color: #e1f0ff;
   height:20px;
   align-items: center;
   display: flex;
}

.progress-text{
   font-size: 12px;
   display: inline-block;
   vertical-align: middle;
   position: absolute;
   margin-left: 45%;
}

.progress-bar-inner{
   border-radius: 10px 0px 0px 10px;
   height: 100%;
   transition: width 0.6s ease;
   text-align: right;
   line-height: 80%;
}