在vue中结合element-ui使用nprogress

先来看下效果

主要是在点击左侧menu菜单栏的时候加载进度条，并且右上角有一个小loading，当路由切换完成的时候进度条到底，loading小动画和进度条一起消失

主要用到的是element-ui中的Progress组件和nprogress，首先在项目中安装nprogress：npm install --save nprogress
安装
nprogress的npm文档介绍：https://www.npmjs.com/package/nprogress
主要通过这两个方法来控制进度条

写代码之前先思考一下，该怎么写最方便，用最少的代码实现最多的功能，既然这个进度条实在路由跳转的时候开始加载的，在跳转到页面完成的时候他就消失了；那么思路就来了，可以利用vue-router中的beforeEach和afterEach来实现

引入nprogress、router相关

import router from './index'
import 'nprogress/nprogress.css'
import NProgress from 'nprogress'

然后在跳转前开始加载进度条

router.beforeEach((to, from, next) => {
     
	NProgress.start()
	//do other something
	const token = getToken()
    if (token) {
     
        if (to.name === 'login') {
     
            next('/analysis_dashboard')
            NProgress.done()
            return
        }
        //判断当前用户是否有权限
        if (hasPermission(to, store.getters.user.auths)) {
     
	        next()
        } else {
     
            alert('当前账号没有权限访问')
        }
        next()
    }
}

路由跳转完成后

router.afterEach(to => {
     
    NProgress.done()
    document.title = getDocumentTitle(to)
})

现在nprogress的部分代码我们已经实现了，现在来封装progress组件

<template>
  <div>
    <transition name="el-fade-in">
      <el-progress
        v-show="visible"
        class="progress"
        type="circle"
        :percentage="percent"
      >
      </el-progress>
    </transition>
  </div>
</template>

<script>
export default {
     
  props: {
     
    percent: {
     
      type: Number,
      default: 0
    }
  },
  computed: {
     
    visible() {
     
      return this.percent < 100
    }
  }
}
</script>
<style scoped>
.progress {
     
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 3000;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
</style>

然后我们在progress.vue的同级下新建progress.js，这个主要来挂载进度条；再利用Vue.extend构造器来创建一个子类，将他挂载到main.js中

progress.js(这里就写核心的代码，一些export之类的就不写了)

const Progress = Vue.extend(progressComponent)

instance = new Progress({
     
   el: document.createElement('div')
})
document.body.appendChild(instance.$el)

最后直接在main.js引入，这样就能实现了

import '@components/progress'