vue前端页面数据加载怎么添加loading效果

这篇文章主要介绍了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 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>

关于“vue前端页面数据加载怎么添加loading效果”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue前端页面数据加载怎么添加loading效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。