基于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);
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue+Element中table表格实现可编辑（select下拉框）

    最近在工作中遇到一个问题,需要在表格中实现数据可编辑状态,具体情况是需要在单元格里加入下拉框:并且每个下拉框的数组数据是不一样的,具体是根据当前行前面数据的id查询而来,前面的是数据是动态生成的,后面的下拉框数据也是根据id动态生成的,内容不同:有点类似于树形二级状态,后面的下拉框数据来源并没有在前面内容里,而是另外一个接口查询,具体操作如下: HTML代码: 1.在处理人列加入一个下拉框模板,其中v-model必须要scope.row.proJbruserValue来绑定,意思是这个值绑定到当

  • vue elementui 实现搜索栏公共组件封装的实例代码

    vue elementui 实现搜索栏公共组件封装的实例代码

    1.背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项,表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,而且多人开发情况下每个人写的样式都不相同,布局样式无法统一. 所以要考虑对搜索栏做一个封装,统一配置引用,提升开发维护效率和界面统一. 完成后的效果大概就是长这样: 2.分析 项目使用的是elementui框架,搜索栏这种表单提交,首先要使用el-form组件来封装,而复杂点就是表单项可能有很多种,例如input输入框.select选择框.日期时间选择框.日

  • vue element-ui el-date-picker限制选择时间为当天之前的代码

    vue element-ui el-date-picker限制选择时间为当天之前的代码 <el-date-picker v-model="firstdate" :picker-options="pickerOptions0" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间&

  • vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）

    1.效果图如下 2.vue代码如下 <el-carousel type="card" arrow="always" :loop="false" :initial-index="1" indicator-position="none" :autoplay="false"> <el-carousel-item v-for="(items, index) in it

  • 解决vue elementUI中table里数字、字母、中文混合排序问题

    1.使用场景 使用elementUI中的table时,给包含数字字母中文的名称等字段排序 例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)->中文拼音(a->z) 2.代码解析 <el-table ref="multipleTable" border tooltip-effect="dark" class="xg-table" style="width: 100%&q

  • vue Element左侧无限级菜单实现

    最近项目中,要用到element-ui的无限级分类菜单,根据角色生成不同的递归数据,查阅了网上很多资料,发现很多都不太完整并且没有很多的延伸性. 梳理递归数据 我们一般拿到后台的数据是:1.扁平化数据格式2.递归式数据格式 let arr = [ { name:小七, id:1 }, { name:小八, id:2 }, { name: 小九, id:3 } ] 我们从后台拿到的是这种扁平化处理数据,那我们实现递归菜单的话需要什么数据格式呢,需要格式如下: let menuItems = [ {

  • 基于Vue+ElementUI的省市区地址选择通用组件

    一.缘由 在项目开发过程中,有一个需求是省市区地址选择的功能,一开始想的是直接使用静态地址资源库本地打包,但这种方式不方便维护,于是放弃.后来又想直接让后台返回全部地址数据,然后使用级联选择器进行选择,但发现数据传输量有点大且处理过程耗时,于是又摒弃了这种方法.最后还是决定采用异步的方式进行省市区地址选择,即先查询省份列表,然后根据选择的省份code查询城市列表,最后根据选择的城市列表获取区/县列表,最终根据应用场景不同,给出了两种实现方案. 其中后台总共需要提供4个接口,一个查询所有省份的接口

  • vue中使用elementUI组件手动上传图片功能

    Vue框架简介 Vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合.是基于MVVM(Model-View-ViewModel)设计思想.提供MVVM数据双向绑定的库,专注于UI层面 使用elementUI上传图片时遇到跨域问题,所以需要自己写一个手动上传图片的方法 代码: html <el-upload class="upload-demo" ref="upload"//绑定ref 清空时会用到 :lim

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

    项目中使用的是vue+element实现的全局loading 1.引入所需组件,这里主要就是router和element组件,element组件引入可以参考element官网 2.下面就是重点及代码实现了 首先是全局的一个变量配置参数,代码如下: //全局页面跳转是否启用loading export const routerLoading = true; //全局api接口调用是否启用loading export const apiLoading = true; //loading参数配置 ex

  • 基于Vue中使用节流Lodash throttle详解

    在Vue中使用 Lodash.throttle 来做节流 在Vue中,有时需要对ajax请求提交进行节流操作.这时候,如果页面在请求成功之后会跳转,使用vue指令once或者加载一个loading遮罩禁止点击即可,但如果请求之后不跳转,并且loading不适用时,需要通过其他方式来实现节流,比如通过标识位判断等,这里我们着重说一下如何通过lodash.throttle来实现节流 lodash lodash是一个广受欢迎的js工具库,其中包含了各种各样的工具函数,方便开发时不需要反复造轮子,更关注

  • 基于vue+canvas的excel-like组件实例详解

    基于vue+canvas的excel-like组件实例详解

    a vue component,基于vue的表格组件,主要解决大数据量的表格渲染性能问题,使用canvas绘制表格,同时支持类似excel的批量选中,复制黏贴删除,实时编辑等功能. vue-grid-canvas Install NPM / Yarn Install the package: npm install vue-canvas-grid --save Then import it in your project import Vue from 'vue' import Grid fro

  • 基于vue 兄弟组件之间事件触发(详解)

    直奔主题! 兄弟组件之间的事件触发,大概思路是通过父级组件交换数据,watch来监听触发事件. 场景是父级组件A同时引用两个子级组件B,C.点击B组件中的按钮执行C组件中的事件. 第一步:父级组件A <bottom-play :play="playStatus" @playStatus="btmChild"></bottom-play> methods:{ listChild:function(val){//B组件自定义事件 状态是布尔值 t

  • Vue Element使用icon图标教程详解(第三方)

    element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下 对于我们来说,首选的当然是阿里icon库 教程: 1.打开阿里icon,注册 >登录>图标管理>我的项目 图标管理>我的项目,点进去 新建项目 新建项目 项目名称随便写.前缀注意,不要跟element-ui自带的icon(前缀为:el-icon)重名了. 设置完,点新建 注意前缀.设置完,点新建 现在我们返回阿里icon首页,点进去你想要的icon

  • 基于nginx设置浏览器协商缓存过程详解

    这篇文章主要介绍了基于nginx设置浏览器协商缓存过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 强缓存与协商缓存的区别 强缓存:浏览器不与服务端协商直接取浏览器缓存 协商缓存:浏览器会先向服务器确认资源的有效性后才决定是从缓存中取资源还是重新获取资源 协商缓存运作原理 现在有一个这样的业务情景:后端的静态资源会不定时地发生更新,而因为浏览器默认使用强缓存,会默认从浏览器缓存中取到过时的资源. 现在我们希望浏览器每次获取资源的时候都向后

  • 基于docker 搭建Prometheus+Grafana的过程详解

    基于docker 搭建Prometheus+Grafana的过程详解

    一.介绍Prometheus Prometheus(普罗米修斯)是一套开源的监控&报警&时间序列数据库的组合,起始是由SoundCloud公司开发的.随着发展,越来越多公司和组织接受采用Prometheus,社会也十分活跃,他们便将它独立成开源项目,并且有公司来运作.Google SRE的书内也曾提到跟他们BorgMon监控系统相似的实现是Prometheus.现在最常见的Kubernetes容器管理系统中,通常会搭配Prometheus进行监控. Prometheus基本原理是通过HTT

  • Vue element实现权限管理业务流程详解

    Vue element实现权限管理业务流程详解

    目录 展开渲染标签编辑权限 对话框内树形组件编辑权限 展示所有权限 添加 编辑 删除 角色 都与上一篇 用户类似 只是接口不同 我们只关注其他不一样的: 展开渲染标签编辑权限 el-table-column type="expand"设置了expand则显示为一个可展开的按钮 显示图上的效果 使用了 三重for循环 按照 tree 数据结构 .children 取得下一级数据 <el-table-column type="expand"> <tem

  • Vue之mixin全局的用法详解

    先贴上官方定义. 个人觉得全局mixin就是给全部Vue文件添加一些公用的实例(方法,过滤器and so on) 使用场景:货币单位,时间格式.这些如果在用到的页面使用的话代码会重复的很多,所以在全局混入这些实例会减少代码量,可维护性也比较高. ex: step1: 先定义mixin.js const mixin = { methods: { /** * 格式化时间 * @param {string|number|object|Array} dateTime - 时间,可以是一个字符串.时间戳.

  • 基于Android实现百度地图定位过程详解

    基于Android实现百度地图定位过程详解

    一.问题描述 LBS位置服务是android应用中重要的功能,应用越来越广泛,下面我们逐步学习和实现lbs相关的应用如定位.地图.导航等,首先我们看如何基于百度地图实现定位功能 二.配置环境 1.注册密钥:地址http://developer.baidu.com/map/ 2.下载定位SDK,并导入SDK如图所示: 三.编写MyApplication类 编写MyApplication类,为了使用方便我们可以将实现定位的方法封装的Application组件中 封装下列方法 1.  获取定位信息--

随机推荐