基于vue+element实现全局loading过程详解
作者:yuwenjing 发布时间:2023-07-02 17:01:05
标签:vue,element,全局,loading
项目中使用的是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);
});
来源:https://www.cnblogs.com/yuwenjing0727/p/13272351.html


猜你喜欢
- instanceof 运算符 和 is_a() 方法都是判断:某对象是否属于该类 或 该类是此对象的父类(用于确定一个 PHP 变量是否属于
- os.path模块是os模块根据系统类型从另一个模块导入的,并非由os模块实现1、os.path.abspath(相对路径)-----返回对
- 建表、insert数据create table tmp_login ( user_id int(11) , logi
- 主要作用与拷贝文件用的。1.shutil.copyfileobj(文件1,文件2):将文件1的数据覆盖copy给文件2。import shu
- 本文讨论 MySQL 的备份和恢复机制,以及如何维护数据表,包括最主要的两种表类型:MyISAM 和 Innodb,文中设计的 MySQL
- pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同。但目前pymysql支持python3.x而后者不支持
- 本文实例讲述了Java实现基于JDBC操作mysql数据库的方法。分享给大家供大家参考,具体如下:package main;import j
- 两年前,我们开发了一套基于Flash的文件(主要是图片)上传RIA应用,提供给阿里巴巴的用户使用。如果你使用过Wordpress或flick
- 前言当我们需要安装python的第三方库时,通常都是打开cmd输入pip install xxx去安装。但是默认安装路径在C盘,极大占用空间
- 目录1. 需求是怎么来的2. 以不变应万变,是变也3. 最大限度地少改动4.对带参数的函数使用装饰器5. 给装饰器参数6.带类参数的装饰器7
- 第一步一般是建立一个关键字替换表 如 id keyword url 等字段第二步是文章显示时把【文章】内容和【关键字替换表】对应的关键字替换
- 本文实例讲述了python生成器/yield协程/gevent写简单的图片下载器功能。分享给大家供大家参考,具体如下:1、生成器:'
- 如下所示:class Login(QMainWindow): """登录窗口""
- modelform是model衍生出来的form .modelform的用法非常死.首先在models.py里创建模型表.所有的form组件
- MicroPython是Python 3语言的精简高效实现,包括Python标准库的一小部分,经过优化可在微控制器和受限环境中运行。WiFi
- 今天填一个坑,俄罗斯方块!!俄罗斯方块的移动不难实现,但是旋转就不太容易实现,究其原因是因为Python中没有数组这种数据结构,所以不能用矩
- 简介:type() 函数可以对数据的类型进行判定。isinstance() 与 type() 区别:type() 不会认为子类是一种父类类型
- 目录前言项目设计后端前端运行项目Q&A前言在前面的Api开发中,我们使用FastApi已经可以很好的实现。但是实际使用中,我们通常建
- 概述从今天开始我们将开启一段自然语言处理 (NLP) 的旅程. 自然语言处理可以让来处理, 理解, 以及运用人类的语言, 实现机器语言和人类
- 前言许久之前用 Mirai 搭建了 QQ 机器人,不过因为云服务器到期了,QQ 机器人被 迫下线,现如今,可能是意犹未尽,今天就基于 go-