NProgress 进度条插件的使用

Love The Way You Lie 2021-07-25 22:56 590阅读 0赞

### NProgress的使用 ###

*   *  一. NProgress - css 文件 和 js 文件 下载地址
     *  二. 引入 NProgress 的 css文件 和 js 文件
     *  三. 使用方法
     *  四. 使用场景
     *  五. Vue 中使用 NProgress

## 一. NProgress - css 文件 和 js 文件 下载地址 ##

**官方网站：** [http://ricostacruz.com/nprogress/][http_ricostacruz.com_nprogress]  
**文件包下载地址：** [https://download.csdn.net/download/Jie\_1997/12440294][https_download.csdn.net_download_Jie_1997_12440294]

## 二. 引入 NProgress 的 css文件 和 js 文件 ##

**依赖于 jQuery (1.8版本及以上)，需要将 jQuery 也引入**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]

## 三. 使用方法 ##

`NProgress.start()` — 显示进度条

`NProgress.set(0.4)` —将进度设置到具体的百分比位置

`NProgress.inc()` — 增加一点点进度

`NProgress.done()` — 完成进度条

## 四. 使用场景 ##

**1.页面加载的效果： 开始页面 开始进度条； 页面加载好 结束进度条。**

$(function () {
        NProgress.start();
        $(window).load(function () { })
        NProgress.done();
    })

**2.ajax发送的效果： 开始发送 开始进度条; 成功后 结束进度条:**

$(window).ajaxStart(function () {
        NProgress.start();
    });
    $(window).ajaxStop(function () {
        NProgress.done();
    });

此方法挂在window上，监听项目中所有的ajax请求。

## 五. Vue 中使用 NProgress ##

1.安装NProgress

npm install --save nprogress

2.main.js中引用NProgress的 js 与 css

//导入 nprogress 对应的 js 和 css
    import Nprogress from 'nprogress'
    import 'nprogress/nprogress.css'

3.拦截器中使用

/**
     * 配置封装axios
     */
    //导入axios
    import axios from 'axios'
    //配置axios请求的根路径
    axios.defaults.baseURL='https://xxxxx'
    // 在 request 拦截器中，展示进度条 Nprogress.start()
    //通过axios拦截器添加token验证
    axios.interceptors.request.use(config=>{
      Nprogress.start()
      //为请求对象，添加 token 验证的 Authorization 字段
      config.headers.Authorization=window.sessionStorage.getItem('token')
      //在最后必须 return config
      return config
    })
    //在 response 拦截器中，隐藏进度条  Nprogress.done()
    axios.interceptors.response.use(config=>{
      Nprogress.done()
      return config
    })
    //挂载原型（axios）
    Vue.prototype.$http=axios

[http_ricostacruz.com_nprogress]: http://ricostacruz.com/nprogress/
[https_download.csdn.net_download_Jie_1997_12440294]: https://download.csdn.net/download/Jie_1997/12440294
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppZV8xOTk3_size_16_color_FFFFFF_t_70]: /images/20210725/0616aab2428c456cae127709dbb795e4.png