基于vue+element实现全局loading过程详解


Posted in Javascript onJuly 10, 2020

项目中使用的是vue+element实现的全局loading

1.引入所需组件,这里主要就是router和element组件,element组件引入可以参考element官网

2.下面就是重点及代码实现了

首先是全局的一个变量配置参数,代码如下:

//全局页面跳转是否启用loading
export const routerLoading = true;

//全局api接口调用是否启用loading
export const apiLoading = true;

//loading参数配置
export const loadingConfig = {
 lock: true,
 text: 'Loading',
 spinner: 'el-icon-loading',
 background: 'rgba(0, 0, 0, 0.7)'
}

接下来是全局的一个loading简单封装,代码如下

import ElementUI from 'element-ui';
import {loadingConfig} from '../src/config/index' //全局的一个基本参数配置

var loading = null ;
const loadingShow = () => {
 loading = ElementUI.Loading.service(loadingConfig);
}

const loadingHide = () => {
 loading.close();
}

const loadingObj={
 loadingShow,
 loadingHide
}

export default loadingObj

页面跳转时全局配置loading,代码如下:

main.js中添加代码:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import glo_loading from '../loading/index' //loading组件的简单封装
import {routerLoading} from '../src/config/index' //全局的页面跳转loading是否启用

Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

//从后台获取的用户角色
const role = 'user'
//当进入一个页面是会触发导航守卫 router.beforeEach 事件
router.beforeEach((to,from,next) => {
 routerLoading ? glo_loading.loadingShow() : '' //如果全局启用页面跳转则加载loading
 if(to.meta.roles){
  if(to.meta.roles.includes(role)){
   next() //放行
  }else{
   next({path:"/404"}) //跳到404页面
  }
 }else{
  next() //放行
 }
routerLoading ? glo_loading.loadingHide() : ''//关闭loading层
})

在ajax请求的时候调用全局loading,代码如下:

// 添加请求拦截器
service.interceptors.request.use(function (config) {
 // 在发送请求之前做些什么
 apiLoading ? glo_loading.loadingShow() : ''//全局loading是否启用
 return config;
}, function (error) {
 // 对请求错误做些什么
 console.log(error);
 return Promise.reject(error);
});

// 添加响应拦截器
service.interceptors.response.use(function (response) {
 // 对响应数据做点什么
 if(response.status == 200){
   return response.data;
 }else{
  Promise.reject();
 }
}, function (error) {
 // 对响应错误做点什么
 console.log(error);
 apiLoading ? glo_loading.loadingHide() : ''
 return Promise.reject(error);
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript this调用规则说明
Mar 08 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 Javascript
JS代码优化的8点建议
Feb 04 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
微信小程序实现拍照和相册选取图片
May 09 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 #Javascript
JavaScript this指向相关原理及实例解析
Jul 10 #Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 #Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 #Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 #Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 #Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 #jQuery
You might like
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
JS实现小星星特效
2019/12/24 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
Python内存读写操作示例
2018/07/18 Python
详解python分布式进程
2018/10/08 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
python计算n的阶乘的方法代码
2019/10/25 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
python下对hsv颜色空间进行量化操作
2020/06/04 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
weblogic面试题
2016/03/07 面试题
linux面试题参考答案(4)
2013/01/28 面试题
校园广播稿500字
2014/02/04 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
电子商务专业求职信
2014/07/10 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
离婚上诉状范文
2015/05/23 职场文书
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python