nprogress页面加载进度条
前言
很多时候在访问网页的时候我们总是看到页面在加载中，可以却不知道要加载多久，无期限的等待总是让人烦躁不安，所以我们希望能知道网页加载的进度，这样我们就能做到心中有数是否继续等待页面加载。这个功能我们可以依靠nprogress来实现，它是轻量级的进度条组件，使用简便，可以很方便集成到应用中来。
安装nprogress
直接在项目中执行安装命令：npm install --save nprogress
nprogress方法
NProgress.start() // 进度条开始 NProgress.set() // 将进度设置到具体的百分比位置，取值范围是0到1.0 NProgress.inc() // 如果少量增加进度，进度将永远不会得到100% NProgress.done() // 进度条结束消失 NProgress.configure() // 进度条参数配置
全局引入nprogress
在main.js中引入nprogress插件和样式，
import NProgress from ‘nprogress' // nprogress插件 import ‘nprogress/nprogress.css' // nprogress样式
配置nprogress
在NProgress.configure({})中我们可以对nprogress进行适当的配置，showSpinner 为 false（禁用进度环）、trickle 为 false（关闭进度条步进）、trickleRate （每次步进增长多少）、trickleSpeed （步进间隔，单位毫秒ms）、ease（动画方向）、speed （动画速度，单位毫秒ms）、minimum （最小百分比）等等。
NProgress.configure({ showSpinner: false }) //我这里只关闭进度环
Vuerouter路由钩子
在添加nprogress之前我们需要先了解Vuerouter的beforeEach与afterEach钩子函数，这是在路由跳转的时候对路由进行一些权限判断或者其他操作时定义的处理函数，Vue.beforeEach是在跳转之前执行，Vue.afterEach是在跳转之后执行判断的。
Vue.beforeEach(function(to,form,next){})函数有三个参数，Vue.afterEach(function(to,form))函数有两个参数：
to:即将进入的路由对象
from:当前导航即将离开的路由对象
next:调用该方法，进入下一个钩子函数，next(false):则中断当前的导航。
在路由中添加nprogress
在main.js中全局钩子函数，在路由跳转前用NProgress.start()标记下进度条开始，在路由跳转后用NProgress.done()标记下结束，这样在路由跳转的时候就可以在页面顶部看到一个progress bar进度条了
import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index.js'
import store from './store'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/icons/index.js'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
Vue.use(Element)
Vue.config.productionTip = false
NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
在请求中添加nprogress
如果你希望每次发送请求的时候也出现进度条的话可以在axios封装中的路由拦截中添加nprogress
// 请求拦截器(请求发出前处理一些请求) axios.interceptors.request.use( NProgress.start() }) // 响应拦截器（处理响应数据） axios.interceptors.response.use( NProgress.done() )
为了让结构更滑清晰简洁些，我们重新整理下代码，即然nprogress主要是用在路由跳转上，这里我将nprogress归纳放入router中，切记实例化router之后调用Vuerouter的beforeEach与afterEach钩子函数生效。
import Vue from 'vue'
import Router from 'vue-router'
import routers from './routers'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false })
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: routers
})
export default router
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})
修改nprogress样式
在app.vue中添加如下样式即可修改nprogress样式，记得添加 !important来覆盖原有样式
#nprogress .bar {
background: #66B1FF !important; // 自定义颜色
height: 20px !important; // 自定义高度
}
参考 https://www.toutiao.com/i6718992880599302659/?group_id=6718992880599302659
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。