vue进度条（vue进度条原理）

本篇文章给大家谈谈vue进度条，以及vue进度条原理对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、用vue做一个简单的环形进度条
• 2、React、Vue添加全局的请求进度条（nprogress）
• 3、Vue 中使用 NProgress 实现进度条
• 4、vue圆环形进度条组件

用vue做一个简单的环形进度条

2019/12/21更新内容:

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

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

| widthPresent |设置bar占父容器宽度的比例| 1 | Number |

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

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

| radius |进度条的厚度| 20 | Number, String |

| progress |进度条段好颂百分比| 20 | Number, String |

| barColor |进度条颜色| '#1890ff' | String |

| backgroundColor |进度条环形背景色| rgba(0,0,0,0.3) | String |

| isAnimation |是否显示动画| true | Bollean |

| isRound |是否使用圆形画笔| true | Bollean |

| duration |动画时长| 1000 | Number, String |

| delay |动画延迟时间| 200 | Number, String |

| timeFunction |动袜团画缓动函数| 'cubic-bezier(0.99, 0.01, 0.22, 0.94)' | String |

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

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

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

React、Vue添加全局的请求进度条（nprogress）

全局的请求进度条，我们可以使用nprogress来实现，效果如下：

首先需要安装插件：

npm i nprogress -S

然后使用的时候主要有两种方式，第一种是切换页面的宏敬扰时候，第二种则是请求接口的时候。

切换页面可以在入口文件添加如下代码：

import NProgress from 'nprogress' // 引入nprogress插件

import 'nprogress/稿亏nprogress.css' // 这个nprogress样式必须引入

router.beforeEach((to, from, next) = {

NProgress.start()

next()

})

router.afterEach(() = {

NProgress.done()

})

接口请求的时候，则是在axios拦截器处进行处理，直接上代码：

// axios请求拦截器

axios.interceptors.request.use(

config = {

NProgress.start() // 设置加载进度条(开始..)

return config

},

error = {

return Promise.reject(error)

}

)

// axios响应拦截器蔽旦

axios.interceptors.response.use(

function(response) {

NProgress.done() // 设置加载进度条(结束..)

return response

},

function(error) {

return Promise.reject(error)

}

)

当然也可以对进度条进行样式自定义

#nprogress .bar {

background: red !important; //自定义颜色

}

。。。。。。。。。。。。。

作者：MonkeySoft

篇幅有限更多请见扩展链接：

[img]

Vue 中使用 NProgress 实现进度条

文章目录：

一、NProgress 安装

二胡烂碧、NProgress 使用

三、NProgress 配置

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

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

在App.vue中的style中增加：

vue圆环形进度条组件

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里加上圆，挡住中心部分

像这样调用即可：

关于vue进度条和vue进度条原理的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。