页面跳转或请求的进度条插件之NProgress 

NProgress是页面跳转时展示在浏览器顶部的进度条
详见官网：http://ricostacruz.com/nprogress/
github：https://github.com/rstacruz/nprogress

效果如下：

 

 

 

插件使用：

//使用方式
1、安装：npm install --save nprogress 或者 yarn add nprogress
2、资源引入：
        <script src='nprogress.js'></script>
        <link rel='stylesheet' href='nprogress.css'/>
3、CDN引入：
        https://unpkg.com/nprogress@0.2.0/nprogress.js
        https://unpkg.com/nprogress@0.2.0/nprogress.css
//页面调用方法
NProgress.start() 与 huoNProgress.done();

在 router.js中

import NProgress from 'nprogress'

import 'nprogress/nprogress.css'

 

router.beforeEach((to, from, next) => {

 　 NProgress.start()
　　...
 　next()

})


router.afterEach(() => {
　　...
　　NProgress.done()
　　

})


//进度条的颜色修改：
在App.vue中的style中设置样式：
    #nprogress .bar {
      background: light-blue!important;
    }

 

//页面ajax 请求结合NProgress

<body>
  <script src="nprogress.js"></script>
  <script src="jquery.js"></script>
  <script>
    $(document).ready(function(){
    NProgress.start();
  });
  $(window).load(function(){
    NProgress.done();
  });
  </script>
</body>

 

　　

 

posted @ 2021-06-21 11:32  逸凨  阅读(227)  评论(0)  编辑  收藏  举报