Vue 中使用 NProgress 实现进度条_IT百科

文章目录：

一、NProgress 安装

二胡烂碧、NProgress 使用

三、NProgress 配置

四裤举、Vue 中修改进度条颜色

入口历橘文件 main.js 引入 nprogress

在App.vue中的style中增加：

CircleProgress.vue

2.都给他们加上背景色，为进度条的颜色。

3.每一块里都加上遮挡层，遮挡层颜色与背景色相同，设定样式以背景圆的圆心为旋转点。

4.给每一块的modal都加上 v-if 属性，只有当比例小于咐迟裤这一块才显示modal层。

例如：进度(rate)为0.25，第一块modal不显示(不满足rate小于0.25)，第二块衡简modal显示(rate <0.5)，

第三块modal显示（rate <0.75），第四块modal显示（rate <1）；

5.加上动态样式

① 顺时针第一块，右上角那块(范围应该为0~0.25)：

② 顺时针第二块，右旦慎下角那块(范围应该为0.25~0.5)：

③ 顺时针第三块，左下角那块(范围应该为0.5~0.75)：

④ 顺时针第四块，左上角那块(范围应该为0.75~1)：

所以可以将上述四个显示的modal层旋转的角度的计算方式写成一个函数，根据是第几块和当前的进度比例（this.rate）来得到角度：

6.说好的圆环形进度条呢？怎么变成圆饼啦？在content里加上圆，挡住中心部分

像这样调用即可：

https://github.com/LiaPig/vue-circle-progress

2019/12/21更新内容:

|名字|说明|默认值|类型|

|:---|---|---|---|

| gradientsColor |bar渐变色设置| [ { offset: "0%", color: "#b2ed9d" },{ offset: "100%", color: "#569b3d" } ] | Array |

| id |组件的id,用于处理多组件共存| 1 | Number, String |

|名字|说明|默认值握郑|类型|

|:---|---|---|---|

|默认插槽|环形进度条中间的title自定义|--|--|

欢迎分享，转载请注明来源：内存溢出

Vue 中使用 NProgress 实现进度条