vue项目之数量占比进度条实现方式

这篇文章主要介绍了vue项目之数量占比进度条实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue数量占比进度条实现

功能说明：

1、点击开始，滚动条自动加；

2、点击停止，滚动条停止加；

封装如下

组件使用

效果如下：

在这里插入图片描述

遇到问题

在到达终点时，总数和剩余值不一致问题，查明问题原因是小数点的问题，目前保留一位小数点；

vue实现进度条效果

这里实现进度条用到了es6语法的模版字符串，通过更改css样式实现正常显示进度的进度条和一种显示剩余余额的进度条：

html代码不需要改变：

 //10为展示的进度，100为总的进度数量

正常显示进度的进度条：

.scheduleCont_1_left_1{ position: relative; width: 100%; height: 0.36rem; background: #E9BBFF; border-radius: 50px; overflow: hidden; .un_xg_1_3_1 { position: absolute; top: 0; left: -1px; width: 0; height: 0.36rem; border-radius: 50px; background-image: linear-gradient(to right, #B72DF7); } }

显示剩余余额的进度条：

.scheduleCont_1_left_1 { position: relative; width: 100%; height: .24rem; background: #ebebeb; border-radius: 50px; overflow: hidden; .un_xg_1_3_1 { float: right; height: .24rem; border-radius: 50px; background-image: linear-gradient(to right, #ff6666); } }