vue自定义进度条
现有进度条组件无法实现项目效果,所以就参考大佬们的写法自定义了一个,效果图如下
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/fb24bca639893b169dc447325334ddda.png)
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%;
}
动态修改 percent 的值对进度条进行更新