前端Vue-Nprogress顶部进度条效果

前端Vue-Nprogress顶部进度条效果

Nprogress顶部进度条

​​Nprogress安装​​​​引入需要的 nprogress.css 和 nprogress.js 文件​​​​基本用法​​

​​结合ajax​​

github地址：nprogress

Nprogress安装

npm install --save nprogress

引入需要的 nprogress.css 和 nprogress.js 文件

//导入进度条插件\js与cssimport Nprogress from 'nprogress'import 'nprogress/nprogress.css'

基本用法

NProgress最重要两个API就是start()和done()，基本一般用这两个就足够了。·NProgress.start(); //显示进度条NProgress.done(); //完成进度条//在request-中显示进度条Nprogress.start()axios.interceptors.request.use(config => { //请求开始时显示进度条 Nprogress.start() return config})//response中完成进度条Nprogress.done()axios.interceptors.response.use(config => { //服务响应时完成进度条 Nprogress.done() return config})

结合ajax

ajaxStart() ajaxStop()

全局事件代码实现加载效果

请求

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。