Nprogress顶部进度条

前端Vue-Nprogress顶部进度条效果_javascript


github地址：nprogress

Nprogress安装

npm install --save nprogress

引入需要的 nprogress.css 和 nprogress.js 文件

前端Vue-Nprogress顶部进度条效果_javascript_02

//导入进度条插件\js与css
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'



<link rel="stylesheet" type="text/css" href="nprogress.css"/>
<script src="nprogress.js"></script>

基本用法

NProgress最重要两个API就是start()和done()，基本一般用这两个就足够了。
·
NProgress.start(); //显示进度条
NProgress.done(); //完成进度条


//在request拦截器中显示进度条Nprogress.start()
axios.interceptors.request.use(config => {
  //请求开始时显示进度条
  Nprogress.start()
  return config
})

//response中完成进度条Nprogress.done()
axios.interceptors.response.use(config => {
  //服务响应时完成进度条
  Nprogress.done()
  return config
})

结合ajax

ajaxStart()
ajaxStop()

全局事件代码实现加载效果

<body>
  <button id="btn">请求</button>
  <script src="nprogress.js"></script>
  <script src="jquery.js"></script>
  <script>
    $(document)
      .ajaxStart(function () {
        //请求开始了
    NProgress.start();
      })
      .ajaxStop(function () {
    //请求结束了
    NProgress.done();
      })
    $('#btn').on('click', function () {
      $.get('time.php')
    })
  </script>
</body>

前端Vue-Nprogress顶部进度条效果_vue.js_03