最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue前端页面数据加载添加loading效果代码实现方法
时间:2022-07-01 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下vue前端页面数据加载添加loading效果代码实现方法,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
效果大致如此,样式我们是可以自定义的。
具体实现
let thisContent = this; let loading = thisContent.$loading({ lock: true, text: '上传中,请稍候...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.5)' }) // 中间进行一系列的操作 // 上传成功后关闭loading, 并显示上传成功 loading.close(); thisC.$message('上传文件成功');
这样一个简单的loading效果就实现了。
全局loading配置
请求的时候 需要一个全局loading来拦截 若是页面单独引用的话 就有点繁琐了 所以需要再全局封装一个 此时就要明白 再哪里封装了 先考虑一下 为什么要用
一方面是为了防止重复操作
另一方面是为了一个加载的效果能够更明显
所以 再请求的时候加 就能联想到axios拦截器的位置处理了 话不多说 开始撸代码 全程copy就行了
1 再src/componennts/Spinner下面建立一个index.vue
css;">
2 再utils下面tools.js
class Msg { static loading() { document.querySelector('.loading-page').style.display = 'block'; } static hideLoading() { document.querySelector('.loading-page').style.display = 'none'; } } export { Tools, Msg }
3 再utils下面建议一个request.js 封装的axios请求
import axios from 'axios' import qs from 'qs' import { MessageBox, Message } from 'element-ui' import store from '@/store' import { getToken } from '@/utils/auth' import router from '@/router' import {Msg} from '@/utils/tools'; import { removeToken } from '@/utils/auth' var allResquest = 0; // create an axios instance const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url withCredentials: true, // 跨域请求时发送 cookies paramsSerializer: params => { // 查询字符串中的数组不使用方括号 return qs.stringify(params, { indices: false }) }, timeout: 15000 // request timeout }) // request interceptor service.interceptors.request.use( config => { if (store.getters.token) { config.headers['Authorization'] = 'Bearer ' + getToken() config.headers['filterMode'] = localStorage.getItem('dataType') } config.headers['project'] = "csr" allResquest = allResquest + 1; if (config.mask !== true) { Msg.loading() } return config }, error => { return Promise.reject(error) } ) // response interceptor service.interceptors.response.use( /** * If you want to get information such as headers or status * Please return response => response */ /** * 下面的注释为通过在response里,自定义code来标示请求状态 * 当code返回如下情况则说明权限有问题,登出并返回到登录页 * 如想通过 XMLHttpRequest 来状态码标识 逻辑可写在下面error中 * 以下代码均为样例,请结合自生需求加以修改,若不需要,则可删除 */ response => { allResquest = allResquest - 1; const res = response.data; if (response.status === 200) { if (allResquest === 0) { Msg.hideLoading(); } // 50008 系统无此账号 // 50010 账号禁用 // 50012 账号或密码错误 // 50013 主账号被禁用,禁止登录 // 50014 token失效 // 50015 登录失败,无操作权限,请联系系统管理员! // 50016 验证码错误 // 429 限流 服务器拥挤,请稍后再试 // -999 未知错误 // 403 无权限 if (res.code === 50008 || res.code === 50010 || res.code === 50012 || res.code === 50013 || res.code === 50016 || res.code === 50015 || res.code === 429 || res.code === -999 || res.code === 403 || res.code === 500) { Message({ message: res.msg || 'error', type: 'error', duration: 5 * 1000, offset: 0 }) return Promise.reject(res.msg || 'error') } else if (res.code === 50014) { if (store.getters.token) { removeToken() } MessageBox.alert( res.msg,'错误提示', { confirmButtonText: '确定', callback: action => { store.dispatch('logout') router.push(`/login`) } }) return false } return res } }, error => { allResquest = allResquest - 1; Msg.hideLoading(); Message({ message: '服务拥挤,请稍后重试!', type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } ) export default service
4 修改app.vue
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12