zoukankan      html  css  js  c++  java
  • nprogress 进度条

     
    1、安装 nprogress
    cnpm install nprogress -D
     
    2、引入 nprogress
    // 引入nprogress
    import NProgress from 'nprogress' // 进度条
    import 'nprogress/nprogress.css' //样式必须引入
     
    3、简单配置
    // 简单配置
    NProgress.inc(0.2)
    NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })
     
    4.进度条使用
         调用 start() 和 done() 方法来控制进度条。
    NProgress.start(); //开始
    NProgress.done(); // 结束
     
     
    某些场景中的使用:
    1、 ajax请求有progress,加载vue-resource的interceptors中
    Vue.http.interceptors.push((request, next) => {
      NProgress.start();
     
      next((response)=>{
        NProgress.done();
      });
    });
     
    2、 路由跳转有progress,加在vue-router的beforeEach和afterEach中
    入口文件,main.js引入 nprogress
    import App from './App'
    import VueRouter from 'vue-router'
    import router from './router' //路由文件
    //引入nprogress
    import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'
     
    Vue.use(VueRouter)
     
    // 简单配置
    NProgress.inc(0.2)
    NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })
     
     
    router.beforeEach((to,from,next) => {
      NProgress.start()
      next()
    })
     
    router.afterEach(() => {
      NProgress.done()
    })
     
     
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

    Vue使用NProgress 修改颜色

    App.vue中的style中增加:

        #nprogress .bar {
          background: red !important; //自定义颜色
        }
  • 相关阅读:
    团队项目-个人博客-4.25
    团队项目-个人博客-4.24 学习进度08
    评价使用的输入法
    个人工作总结08
    个人工作总结07
    第八周学习进度条
    个人工作总结06
    构建之法阅读笔记04
    个人工作总结05
    个人工作总结04
  • 原文地址:https://www.cnblogs.com/qiunanyan/p/13927905.html
Copyright © 2011-2022 走看看