vue前端页面数据加载添加loading效果的实现
作者:沃特艾文儿~
这篇文章主要介绍了vue前端页面数据加载添加loading效果的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
前端页面数据加载添加loading效果
在前端上传文件或者加载数据的时候会有一段等待时间,如果加上一个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" :style="{display:hide?'none':'block'}"> <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 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
<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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。