vue 添加NProgress进度条插件

悠悠 2024-04-07 12:04 91阅读 0赞

### NProgress ###

NProgress是页面跳转是出现在浏览器顶部的进度条。

官网：[http://ricostacruz.com/nprogress][http_ricostacruz.com_nprogress]

github：[https://github.com/rstacruz/nprogress][https_github.com_rstacruz_nprogress]

### 安装 ###

npm install nprogress
    
    # 如果使用 ts，还需安装 @types/nprogress
    npm install @types/nprogress --save-dev

import 导入后，若提示无法找到。那么，需要在 vue3 ts版本的.env.d.ts中声明一下：declare module ‘nprogress’

### 路由中使用 ###

import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'
    
    router.beforeEach((to, from , next) => {
        
       NProgress.start();   //每次切换页面时，调用进度条
       next();    //没有 next() 页面不会跳转
    });
    
    router.afterEach(() => {
        
       NProgress.done();   // 在即将进入新的页面组件前，关闭掉进度条
    })

### 封装axios中使用 ###

//在 request 拦截器中显示进度条 Nprogress.start()
    axios.interceptors.request.use(config => {
        
       NProgress.start();   //请求开始时显示进度条
       return config
    })
    
    //response中完成进度条 Nprogress.done()
    axios.interceptors.response.use(config => {
        
       NProgress.done();   //服务响应时完成进度条
       return config
    })

### NProgress属性介绍 ###

NProgress.start()    // 开始
    NProgress.set(0.4)   // 设置进度，0-1
    NProgress.inc()      // 让进度条增加
    NProgress.done()     // 完成

1、百分比：通过设置 progress 的百分比，调用set(n)来控制进度，其中 n 的取值范围为 0-1。

NProgress.set(0.0);    
    NProgress.set(0.4);
    NProgress.set(1.0);

2、递增：要让进度条增加，只要调用inc()。这会产生一个随机增量，但不会让进度条达到 100%。此函数适用于图片加载或其他类似的文件加载。

NProgress.inc();

3、强制完成：done()设定true，强制使进度条显示满格，即使它开始状态，没有被显示出来。

NProgress.done(true);

4、minimum：设置最低百分比

NProgress.configure({
         minimum: 0.1 });

5、template：改变进度条的 HTML 结构。为保证进度条能正常工作，需要元素拥有role='bar’属性。

NProgress.configure({
        
       template:"<div class='....'>...</div>"
    });

6、ease：调整动画设置，ease 可传递 CSS3 缓冲动画字符串（如 ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier）。speed为动画速度（单位 ms）。

NProgress.configure({
         ease: 'ease', speed: 500 });

7、自定义进度条颜色

#nprogress .bar {
        
      background: red !important;
    }

### 进度条配置 ###

NProgress.configure({
        
       easing: 'ease',  // 动画方式，和css动画属性一样（默认：ease）
       speed: 500,  // 递增进度条的速度，单位ms（默认： 200）
       showSpinner: false,  // 是否显示加载ico
       trickle: true,  //是否自动递增
       trickleSpeed: 200,  // 自动递增间隔
       minimum: 0.3,   // 初始化时的最小百分比，0-1（默认：0.08）
       parent: '#container'  //指定此选项以更改父容器（默认：body）
    })

[http_ricostacruz.com_nprogress]: http://ricostacruz.com/nprogress
[https_github.com_rstacruz_nprogress]: https://github.com/rstacruz/nprogress