这篇文章主要介绍了vue前端页面数据加载怎么添加loading效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue前端页面数据加载怎么添加loading效果文章都会有所收获，下面我们一起来看看吧。
前端页面数据加载添加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
<template> <div class="loading-page bg-opacity" :> <div class="dark" @dblclick="close"> <div class="la-ball-spin-clockwise la-2x"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div></template><script> export default { data() { return { hide: true } }, methods: { close() { document.querySelector('.loading-page').style.display = 'none'; } } }</script> <!-- Add "scoped" attribute to limit CSS to this component only --><style scoped lang="scss"> .show { display: block; } .hide { display: none; } .loading-page { background: rgba(0, 0, 0, .65); display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; min-width: 100%; transition: all 1s; z-index: 20000; &.hide { display: none; } &.bg-opacity { background: rgba(0, 0, 0, 0); } .dark { width: 100px; height: 100px; border-radius: 10px; background: rgba(0, 0, 0, .65); position: absolute; top: 40%; left: 50%; margin-left: -50px; text-align: center; img { width: 70px; height: 70px; margin-top: 15px; } } } .la-ball-spin-clockwise{ width: 64px; height: 64px; margin-top: 18px; margin-left: 18px; display: block; font-size: 0; color: #fff; position: relative; box-sizing: border-box; animation-play-state: running; } .la-ball-spin-clockwise>div{ width: 16px; height: 16px; margin-top: -8px; margin-left: -8px; position: absolute; border-radius: 100%; animation: ball-spin-clockwise 1s infinite ease-in-out; display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor; animation-play-state: running; } .la-ball-spin-clockwise>div:nth-child(1){ top: 5%; left: 50%; webkit-animation-delay: -.875s; -moz-animation-delay: -.875s; -o-animation-delay: -.875s; animation-delay: -.875s; } .la-ball-spin-clockwise>div:nth-child(2) { top: 18.1801948466%; left: 81.8198051534%; -webkit-animation-delay: -.75s; -moz-animation-delay: -.75s; -o-animation-delay: -.75s; animation-delay: -.75s; } .la-ball-spin-clockwise>div:nth-child(3) { top: 50%; left: 95%; -webkit-animation-delay: -.625s; -moz-animation-delay: -.625s; -o-animation-delay: -.625s; animation-delay: -.625s; } .la-ball-spin-clockwise>div:nth-child(4) { top: 81.8198051534%; left: 81.8198051534%; -webkit-animation-delay: -.5s; -moz-animation-delay: -.5s; -o-animation-delay: -.5s; animation-delay: -.5s; } .la-ball-spin-clockwise>div:nth-child(5) { top: 94.9999999966%; left: 50.0000000005%; -webkit-animation-delay: -.375s; -moz-animation-delay: -.375s; -o-animation-delay: -.375s; animation-delay: -.375s; } .la-ball-spin-clockwise>div:nth-child(6) { top: 81.8198046966%; left: 18.1801949248%; -webkit-animation-delay: -.25s; -moz-animation-delay: -.25s; -o-animation-delay: -.25s; animation-delay: -.25s; } .la-ball-spin-clockwise>div:nth-child(7) { top: 49.9999750815%; left: 5.0000051215%; -webkit-animation-delay: -.125s; -moz-animation-delay: -.125s; -o-animation-delay: -.125s; animation-delay: -.125s; } .la-ball-spin-clockwise>div:nth-child(8) { top: 18.179464974%; left: 18.1803700518%; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; } @-webkit-keyframes ball-spin-clockwise{ 0%,100%{ opacity:1; -webkit-transform:scale(1); transform:scale(1)} 20%{ opacity:1 } 80%{ opacity:0; -webkit-transform:scale(0); transform:scale(0) } } @-moz-keyframes ball-spin-clockwise{ 0%,100%{ opacity:1; -moz-transform:scale(1); transform:scale(1) } 20%{ opacity:1 } 80%{ opacity:0; -moz-transform:scale(0); transform:scale(0) } } @-o-keyframes ball-spin-clockwise{ 0%,100%{ opacity:1; -o-transform:scale(1); transform:scale(1) } 20%{ opacity:1 } 80%{ opacity:0; -o-transform:scale(0); transform:scale(0) } } @keyframes ball-spin-clockwise{ 0%,100%{ opacity:1; -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); transform:scale(1) } 20%{ opacity:1 } 80%{ opacity:0; -webkit-transform:scale(0); -moz-transform:scale(0); -o-transform:scale(0);transform:scale(0) } }</style>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 instanceconst 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 interceptorservice.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 interceptorservice.interceptors.response.use( 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 service4 修改app.vue
<template> <div id="app"> <router-view /> <Spinner></Spinner> </div></template><script>import Spinner from '@/components/Spinner'export default { name: 'App', components: { Spinner }}</script><style></style>关于“vue前端页面数据加载怎么添加loading效果”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue前端页面数据加载怎么添加loading效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
