先来看下效果
主要是在点击左侧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'