zoukankan      html  css  js  c++  java
  • vue 中使用nprogress 进度条

    安装方法:

      NPM

      npm install --save nprogress
    

      Yarn

       yarn add nprogress
    一般页面使用方法:
      直接引入js、css或者通过cdn引入。

      <script src='nprogress.js'></script>
      <link rel='stylesheet' href='nprogress.css'/>

      NProgress.start(); //进度条出现
      NProgress.done();  //进度条消失

    在路由文件中使用(导入在入口文件一样)
      router.beforeEach((to, from, next) => {   
        NProgress.start()
        next()
      })
    
      router.afterEach(() => {  
        NProgress.done()
      }

    Vue ui 直接在依赖项目添加

    在入口文件引入
      import NProgress from 'nprogress'
      import 'nprogress/nprogress.css'
       以下为使用方法,分别在响应前和响应后调用开始和结束
      axios.interceptors.request.use(config => {
          NProgress.start();
          return config
      })
      axios.interceptors.response.use(config => {
          NProgress.done();
          return config
      })

     VUE中修改进度条颜色  

    App.vue中的style中增加:

    #nprogress .bar {
          background: red !important; //自定义颜色
     }
    网址 https://madewith.cn/23
  • 相关阅读:
    Cookies 和 Session的区别
    List接口、Set接口和Map接口
    Java NIO:IO与NIO的区别
    NIO与传统IO的区别
    Java中堆内存和栈内存详解
    Java序列化与反序列化
    maven搭建
    深入研究java.lang.ThreadLocal类
    SQL 优化经验总结34条
    数据库事务的四大特性以及事务的隔离级别
  • 原文地址:https://www.cnblogs.com/loving0606/p/14061598.html
Copyright © 2011-2022 走看看