全局配置遮罩层（VUE Element Ui）

组件中

index.js

import ElementUI from 'element-ui'
import { loadingConfig } from './loadingConfig' // 全局的一个基本参数配置var loading = null
const loadingShow = () => {loading = ElementUI.Loading.service(loadingConfig)
}const loadingHide = () => {loading.close()
}const loadingObj = {loadingShow,loadingHide
}export default loadingObj

loadingConfig.js

// 全局页面跳转是否启用loading
export const routerLoading = true// 全局api接口调用是否启用loading
export const apiLoading = true// loading参数配置
export const loadingConfig = {lock: false,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.3)'
}

main.js之中，感觉不需要引，但是查的资料写了，先放着

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

request.js之中

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import router from '@/router'
import glo_loading from '@/components/loading/index' // loading组件的简单封装
import { apiLoading } from '@/components/loading/loadingConfig' // 全局的页面跳转loading是否启用// create an axios instance
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // url = base url + request urlwithCredentials: true, // send cookies when cross-domain requeststimeout: 50000 // request timeout
})// request interceptor
service.interceptors.request.use(config => {// do something before request is sentapiLoading ? glo_loading.loadingShow() : ''if (store.getters.token) {config.headers['utk'] = getToken()}// console.log(config)return config},error => {// do something with request errorapiLoading ? glo_loading.loadingHide() : ''console.log(error) // for debugreturn Promise.reject(error)}
)// response interceptor
service.interceptors.response.use(response => {// 如果是Blob类型，直接返回responseif (response.data instanceof Blob) {apiLoading ? glo_loading.loadingHide() : ''return response}if (response.headers['content-disposition']) {apiLoading ? glo_loading.loadingHide() : ''return response}const res = response.data// if the custom code is not 20000, it is judged as an error.if (res.header.code !== '000000') {Message({message: res.header.msg || 'Error',type: 'error',duration: 5 * 1000})if (res.header.code === 'L00001') {router.replace({ path: '/notAuth' })}if (res.code === 50008 || res.code === 50012 || res.code === 50014) {// to re-loginMessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {confirmButtonText: 'Re-Login',cancelButtonText: 'Cancel',type: 'warning'}).then(() => {store.dispatch('user/resetToken').then(() => {location.reload()})})}apiLoading ? glo_loading.loadingHide() : ''return Promise.reject(new Error(res.message || 'Error'))} else {apiLoading ? glo_loading.loadingHide() : ''return res}},error => {console.log('err' + error) // for debugMessage({message: error.message,type: 'error',duration: 5 * 1000})apiLoading ? glo_loading.loadingHide() : ''return Promise.reject(error)}
)export default service

全局配置遮罩层（VUE Element Ui）相关推荐

nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
【Vue+Element UI】关闭指定某一个页面的loading动画
[Vue+Element UI]关闭指定某一个页面的loading动画模板:vue-admin-template v4.4.0 问题描述:由于vue-admin默认配置了全局loading,所以页面 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
一个基于.Net Core+Vue+Element Ui开发的OA系统
今天给大家推荐一个开源OA系统. 项目简介这是一个基于.Net Core构建的简单.跨平台OA系统.企业可以利用它进行信息化建设,框架提供了用户管理.权限管理.表引擎.流程引擎.BI智能报表,可以大 ...
bind-html自动换行,vue element ui this.$alert 样式修改，长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果问题 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

全局配置遮罩层（VUE Element Ui）

全局配置遮罩层（VUE Element Ui）相关推荐

最新文章

热门文章