需求
在开发过程中,你是否想在浏览器的可视窗口顶部看到这样一种进度条呢,今天就让我来为你推荐这样一款插件NProgress。
效果
使用
本地静态资源的引入
你可以下载该资源放入你的项目某个静态文件夹中,通过本地引入方式使用该插件。这是js插件以及css样式,可以自定义css样式
- https://unpkg.com/nprogress@0.2.0/nprogress.js
- https://unpkg.com/nprogress@0.2.0/nprogress.css
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
NPM下载依赖
npm install --save nprogress
该插件提供了一些api,具体可以查看官网的使用方法。
项目中使用
最近在写一个音乐播放器的项目,就想着用用这个插件实现加载的效果
编写一个工具类
首先在我项目的utils文件夹下创建nprogress.js插件
import NProgress from 'nprogress'
// 自定义css
import '@/assets/css/nprogress.css'
// 进度条的配置项:ease可以设置css3动画,如ease,linear;speed是进度条从开始到结束的耗时
NProgress.configure({
// 样式为横线
ease: 'linear',
// 加载速度
speed: 600
})
function start() {
return NProgress.start() // 进度条开始
}
function done() {
return NProgress.done() // 进度条结束
}
// 统一暴露
export default {
start,
done
}
然后这块我是自定义了横线的样式,自定义nprogress.css,这里注意一下z-index的值,如果值低于当前页面z-index的值的时候就会显示不出来,看个人项目的具体设置。
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: #e4eafd;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #e4eafd, 0 0 5px #e4eafd;
opacity: 1;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
使用
方式一
这里有两种使用方式,一种是在路由跳转的时候通过前置路由守卫和后置路由守卫来控制。这个设置可以在你的router路由之下使用,也可以在main.js中全局使用。我这里的在main.js中全局使用的。
// 引入浏览器加载进度条
import NProgress from '@/utils/nprogress'
// 自定义css
import '@/assets/css/nprogress.css'
// router是暴露路由的引入方式,这里根据实际情况来,
import router from './router'
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})
方式二
另外一种方式就是在网络请求以及响应的时候使用,这是我比较推荐的,这里可以看实际开发业务来。只是我的项目比较适合这种,当然你也可以两种方式一起使用的。
import NProgress from '@/utils/nprogress'
// 添加请求拦截器
instance.interceptors.request.use(
config => {
// 进度条开始
NProgress.start()
return config
},
error => {
Message.error({
message: '请求超时了!'
})
return Promise.reject(error)
}
)
// 添加响应拦截器,做登录响应的拦截
instance.interceptors.response.use((response) => {
let data = response.data
let status = response.status
// 进度条结束
NProgress.done()
if (status === 200) {
return Promise.resolve(data)
} else if (status === 301) {
Message.error('请先登录账户')
router.replace({
path: 'login'
})
} else {
return Promise.reject(response)
}
}, function (error) {
return Promise.reject(error)
})
写在最后
祝大家假期愉快,新时代农民工的假期生活也是敲代码写文章啊。