hello!在我们的项目中,尤其是网页效果,也许会遇到进度条需求,那么我们怎么实现呢?这里介绍一个插件,可以快速实现进度条效果,草履虫都能学会!
(1)第一步,来到终端:
npm install --save nprogress
没错,插件名就是nprogress。
(2)第二步,在哪里使用。
一般情况下,我们可以在二次封装的axios中的拦截器中使用,项目中经常在src文件夹目录下建立api文件夹,比如我将axios二次封装写在request.js中。
//引入axios
import axios from 'axios'
//引入nprogress
import nprogress from 'nprogress'
//千万不要忘记引入进度条的样式
import 'nprogress/nprogress.css'
//可以去执行以下操作,会发现返回结果有start:进度条开始,done:进度条结束
// console.log(nprogress)
const requests = axios.create({
baseURL:"/api",
timeout:5000
})
//请求拦截器
requests.interceptors.request.use((config)=>{
//start:进度条开始
nprogress.start();
return config
})
//响应拦截器
requests.interceptors.response.use((res)=>{
//done:进度条结束
nprogress.done()
return res.data
},(error)=>{
return Promise.reject(error);
})
export default requests
嗯!这样再配合我们的请求,就会发现出现进度条效果,没有的也可以重新npm run serve试试。
再聊聊进度条样式,它自带的是#29d色,如果开发需求要求我们更换进度条颜色,可以在目录执行ctrl+F查找nprogress/nprogress.css文件,修改其background即可,比如我想换个自定义颜色:
#nprogress .bar {
/* background: #29d;*/
background: rgb(255, 4, 0);
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
一些注意事项:
start、done的位置没写对可能出不来效果;一定要引入进度条的样式文件!
当然了有其他好用的插件也欢迎在评论区分享哦!