element ui loading加载开启与关闭方式
element ui loading加载开启与关闭
我们在使用element ui loading加载组件的服务方式的时候想要在请求开始之前开启组件,请求成功或者失败时关闭组件,官网上是在一个方法里面写着开启与关闭,所以我们可以做一个小小的封装;
//Loading加载 openFullScreen() { const loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); return loading; }
这里我们在开启loading的同时,返回loading;
closeFullScreen(loading){ loading.close(); },
关闭时接受开启返回的loading;
//开启 this.openFullScreen(); //vue框架 axios请求 this.$http.post("url").then(res => { //请求成功关闭; this.closeFullScreen(this.openFullScreen()); }).catch(()=>{ //请求失败关闭; this.closeFullScreen(this.openFullScreen()); })
封装完的使用;
使用element ui的Loading组件
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); });
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue2 Element description组件列合并详解
在使用Vue的时候经常会涉及到表格的列合并,下面这篇文章主要给大家介绍了给大家Vue2 Element description组件列合并的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01vue项目中使用eslint+prettier规范与检查代码的方法
这篇文章主要介绍了vue项目中使用eslint+prettier规范与检查代码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-01-01修改el-form-item中的label里面的字体边距或者大小问题
这篇文章主要介绍了修改el-form-item中的label里面的字体边距或者大小问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10uni-app中使用ECharts配置四种不同的图表(示例详解)
在uni-app中集成ECharts可以为我们的应用提供强大的图表功能,我们详细说一下如何在uni-app中使用ECharts,并配置四种不同的图表,感兴趣的朋友跟随小编一起看看吧2024-01-01npm安装vue脚手架报错警告npm WARN deprecated
安装vue脚手架报错可能具体原因比较多,可以根据报错信息进行排查,本文主要介绍了npm安装vue脚手架报错警告npm WARN deprecated,感兴趣的可以了解一下2023-11-11
最新评论