每周一推(npm包)nprogress

1,277 阅读2分钟

前言

为了不让自己的空余时间都浪费掉,打算做一个每周一推的专栏,盘点一些好的插件,分享给大家🎈。

NProgress

大家在查看vue-element-admin或者某些相关文档的时候部分网站都会有浏览器加载进度条,接下来我们就用插件来实现它。👇

用法

  • 安装
npm install --save nprogress
  • 引用
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css' // Progress 进度条样式
  • 全局引用配置
  • main.js
//引入nprogress 进度条插件
import NProgress from 'nprogress'
// 简单配置  进度条,可以不配置:在axios中我们不再做配置,以用来区分。
NProgress.configure({ minimum: 0.01 });
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })

API

  • 只需调用start()和done()即可控制进度条。
NProgress.start();
NProgress.done();

  • 百分比:要设置进度百分比,请调用.set(n),其中n是介于0-1之间的数字。
NProgress.set(0.0);     // .start()相似
NProgress.set(0.4);
NProgress.set(1.0);     // .done()相似
  • 递增:只需使用.inc() 这会以随机数量增加它。这永远不会达到 100%:
 NProgress.inc();
  • 设置启动值最小值默认0.08最大1
NProgress.configure({ minimum: 0.8 });

  • 设置使用缓动(CSS 缓动字符串)和速度(以毫秒为单位)调整动画设置。(默认值:ease和200)
NProgress.configure({ easing: 'ease', speed: 600 });
  • 修改加载条的颜色(只需要全局替换对应的#29d就可以修改相关样式)

应用场景

可以配合请求的拦截器,或者路由的拦截器一起使用,加载loading

在请求中使用

  • api.js
import axios from 'axios'
//引入nprogress 进度条插件
import NProgress from 'nprogress'

// 创建axios实例
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, //URL地址   环境变量文件
    timeout: 5000 ,//超时
})

// 请求拦截器
service.interceptors.request.use(
    config => {
    	// 开启进度条
		NProgress.start();
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

// 响应拦截器
service.interceptors.response.use(
    response =>{
        // 关闭进度条
        NProgress.done()
    	return Promise.reject(response)
    },
    error => {
        // 关闭进度条
        NProgress.done()
        return Promise.reject(error)
    }
)

export default service;

在路由切换中使用

import Vue from 'vue'
import VueRouter from 'vue-router'
import NProgress from 'nprogress'

Vue.use(VueRouter);
export const constRouter = [
    {
        path: '/login',
        component: () => import('@/views/login/Login'),
    },
]
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: constRouter
})
// 页面路由刚开始切换的时候
router.beforeEach(async (to,from,next) => {
    // 开启进度条
    NProgress.start();
})
// 页面路由切换完毕的时候
router.afterEach(() => {
    // 关闭进度条
    NProgress.done()
})
​
​
export default router

总结

NProgress的使用特别简单,希望大家可以根据需求合理的使用,且不要贪杯哦🎈。

本文正在参加「金石计划」