【转】使用 Element-UI 的 Loading 组件-以服务的方式调用

转载地址：https://www.jianshu.com/p/95ec2286bc6d

Element-UI 提供了 Loading 组件，通过对于这个组件进行一些处理，我们能做到在发送请求的时候进行 loading 操作

实现

先写一个 loading.js 文件：

import { Loading } from 'element-ui';let loadingCount = 0;
let loading;const startLoading = () => {loading = Loading.service({lock: true,text: '加载中……',background: 'rgba(0, 0, 0, 0.7)'});
};const endLoading = () => {loading.close();
};export const showLoading = () => {if (loadingCount === 0) {startLoading();}loadingCount += 1;
};export const hideLoading = () => {if (loadingCount <= 0) {return;}loadingCount -= 1;if (loadingCount === 0) {endLoading();}
};

再在 axios 的 interceptor 中调用：

// ...
import { showLoading, hideLoading } from './loading';/* 请求拦截器（请求之前的操作） */
ajax.interceptors.request.use((req) => {showLoading();return req;
}, err => Promise.reject(err));/* 请求之后的操作 */
ajax.interceptors.response.use((res) => {hideLoading();return res;return Promise.reject(res);
}, (err) => {hideLoading();return Promise.reject(err);
});

【转】使用 Element-UI 的 Loading 组件-以服务的方式调用相关推荐

element ui 弹出组件的遮罩层在弹出层的上面的解决方法
element ui 弹出组件的遮罩层在弹出层的上面的解决方法参考文章: (1)element ui 弹出组件的遮罩层在弹出层的上面的解决方法 (2)https://www.cnblogs.com/ ...
element UI上传图片Upload组件使用图片转base64和fale文件处理 formdata数据格式的应用
element UI上传图片Upload组件使用 & 图片转base64和fale文件处理 & formdata数据格式的应用 1.element UI上传图片Upload组件使用效 ...
vue问题三：element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
Element UI（桌面组件库）之三大灵魂拷问
1. 什么是Element UI 概述 Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element UI是基于Vue 2.0的 Element UI 提供 ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
element ui table封装组件，render 函数动态事件设置
接着上一篇讲的,封装element ui table, 支持自定义列的展示和按照指定顺序展示自定义列需要在引用页面重新写一下,这样就可以定义化了,多数用于一些转换,或者操作列场景下,自行考虑即可,我 ...
element ui 多个子组件_ElementUI 技术揭秘（2）组件库的整体设计
需求分析当我们去实现一个组件库的时候,并不会一上来就撸码,而是把它当做产品一样,思考一下我们的组件库的需求.那么对于 element-ui,除了基于 Vue.js 技术栈开发组件,它还有哪些方面的需 ...
element ui 多个子组件_vue前端UI框架，一点都不圆润，盘它！
面对众多vue前端UI框架,看着它们干干巴巴.麻麻赖赖的样子,一点都不圆润,跟我一起盘它! Vue移动端UI框架 1.Vux(star:15620) VUX(读音 [v'ju:z],同 views)是 ...
vue+element UI的 table组件实现日历
有现成的日历插件但是不符合需求,所以项目中使用vue+element 的表格组件自己实现一个日历组件核心js部分:此部分为计算的当月的日期且包含是否可选,是否节假日等等可操作的标记,这部分基本是实现 ...
vue中element ui 中tree组件怎么自定义前缀图标呢?
一问题饿了么ui 默认的图标样式是: 1. 一个箭头, 展开自动顺时针旋转90°, 以上的条件是该节点有子节点, 2. 如果是没有子节点的节点, 是默认空白图标的(这里我认为他不是没有, 而是有占 ...

【转】使用 Element-UI 的 Loading 组件-以服务的方式调用

实现

【转】使用 Element-UI 的 Loading 组件-以服务的方式调用相关推荐

最新文章

热门文章