zoukankan      html  css  js  c++  java
  • React、Vue添加全局的请求进度条(nprogress)

    全局的请求进度条,我们可以使用nprogress来实现,效果如下:

    首先需要安装插件:

    npm i nprogress -S
    

     然后使用的时候主要有两种方式,第一种是切换页面的时候,第二种则是请求接口的时候。

    切换页面可以在入口文件添加如下代码:

    import NProgress from 'nprogress' // 引入nprogress插件
    import 'nprogress/nprogress.css'  // 这个nprogress样式必须引入
    
    router.beforeEach((to, from, next) => {
      NProgress.start()
      next()
    })
    router.afterEach(() => {
      NProgress.done()
    })
    

     接口请求的时候,则是在axios拦截器处进行处理,直接上代码:

    // axios请求拦截器
    axios.interceptors.request.use(
      config => {
        NProgress.start() // 设置加载进度条(开始..)
        return config
      },
      error => {
        return Promise.reject(error)
      }
    )
    // axios响应拦截器
    axios.interceptors.response.use(
      function(response) {
        NProgress.done() // 设置加载进度条(结束..)
        return response
      },
      function(error) {
        return Promise.reject(error)
      }
    )
    

     当然也可以对进度条进行样式自定义

     #nprogress .bar {
          background: red !important; //自定义颜色
        }
    
  • 相关阅读:
    maven学习
    存储过程的作用
    数据库优化
    Springmvc整合mybatis
    Spring Mvc简介
    Axis2开发实例
    Mybatis之typeAlias配置的3种方法
    Spring AOP教程及实例
    spring AOP底层原理实现——jdk动态代理
    Java实现动态代理的两种方式
  • 原文地址:https://www.cnblogs.com/monkeySoft/p/13048072.html
Copyright © 2011-2022 走看看