Element-ui實現loading的局部刷新

後臺管理系統loading的局部刷新

 

在一次vue+element-ui後臺管理系統的項目中，遇到這樣一個問題，引入element-ui加載框後，loading會佔滿整個屏幕，雖然經過改變路由實現了局部刷新，可是loading的全屏刷新，讓人看上去非常不爽，覺得是全局刷新。再一個問題就是，一個頁面中可能含有的多個請求，在攔截器彙總設置關閉loading後，會出現的問題就是，有些數據仍是空的，可是loading框就已經關閉了咱們須要實現的是全部請求完成後關閉loading。因此這是另外一個問題。 

---

 

因此爲了解決這兩個問題作此總結，幫助更多的小夥伴脫坑。

若是要實現全局的刷新則能夠查看博主的另外一片總結： 傳送門

 

沒有思路就沒有出路，先說思路：

 

局部的loading框的出現，element-ui在vue中引入後，就會默認在vue原型鏈上掛在一個loaiding方法，能夠經過vue.prototype.$loading看到，解決問題的關鍵就在這個方法中，該方法中能夠設置這麼幾個屬性lock，text，target，background，咱們搞清楚這些，問個問題也就迎刃而解。lock能夠看做是loading的開關，text則是loading的文本的提示信息。target則是根據類型顯示須要出現loading的區域。background則是loading的bgcolor

 

全部請求完成後再關閉loading，默認你們都知道vue攔截器。解決思路比較簡單，建立一個定時器，在request時，num++，在response時num--當num<=0時，則全部請求都有告終果，這個時候咱們就能夠關閉loading了。 

情景及Demo

後臺管理系統，header，aside，main，除了loading，404外，實現main的局部刷新，且全部請求完成後再關閉loading框。 先看咱們的網絡請求層，封裝的fetch.js文件. 

import axios                from 'axios'
import { Message} from 'element-ui'
import router               from '../router/permission'
import Vue from 'vue'
 
// loading框設置局部刷新，且全部請求完成後關閉loading框
let loading;
function startLoading() {
  loading = Vue.prototype.$loading({
    lock: true,
    text: "Loading...",
    target: document.querySelector('.loading-area')//設置加載動畫區域
  });
}
function endLoading() {
  loading.close();
}
 
//聲明一個對象用於存儲請求個數
let needLoadingRequestCount = 0;
function showFullScreenLoading() {
    if (needLoadingRequestCount === 0) {
        startLoading();
    }
    needLoadingRequestCount++;
};
function tryHideFullScreenLoading() {
    if (needLoadingRequestCount <= 0) return;
    needLoadingRequestCount--;
    if (needLoadingRequestCount === 0) {
      endLoading();
    }
};
 
//  請求攔截
axios.interceptors.request.use(config => {
  showFullScreenLoading();
  return config;
}, err => {
  tryHideFullScreenLoading();
  Message.error({ message: '請求超時!' });
  return Promise.resolve(err);
})
//  響應攔截
axios.interceptors.response.use(res => {
  tryHideFullScreenLoading();
  if (res.data.code == 200) {
    return res.data.result;
  } else if (res.data.code == 401) {
    router.push('/login');
    return Promise.reject(res);
  } else if (res.data.code == 201) {
    Message.error({ message: res.data.msg });
    return Promise.reject(res);
  }
  return Promise.reject(res);
}, err => {
  tryHideFullScreenLoading();
  if (err.response.status == 504 || err.response.status == 404) {
    Message.error({ message: '服務器被吃了⊙﹏⊙∥' });
  } else if (err.response.status == 403) {
    Message.error({ message: '權限不足,請聯繫管理員!' });
  } else {
    Message.error({ message: '未知錯誤' });
  }
  return Promise.reject(err);
})
 
let base = '';
export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}
export const getRequest = (url, data = '') => {
  return axios({
    method: 'get',
    params: data,
    url: `${base}${url}`
  });
}

 

下來咱們就須要查看咱們的主入口文件Home.vue. 

 

<template>
<!-- 佈局 -->
  <el-container>
    <el-header class="header-wraper" >
      <admin-header></admin-header>
    </el-header>
    <el-container class="container">
      <el-aside >
        <admin-aside></admin-aside>
      </el-aside>
      <el-main class="loading-area">
        <keep-alive>
         <router-view v-if="this.$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!this.$route.meta.keepAlive"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
 
<script>
import AdminAside  from '@/components/Commons/Aside/index';
import AdminHeader from '@/components/Commons/Header/index'
    export default {
    components: {
      AdminAside,
      AdminHeader
    },
    data () {
      return {}
    },
  }
</script>
 
<style lang="less" scoped>
  .header-wraper {
    width: 100%;
    height: 70px;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
  }
  .container {
    width: 100%;
    height: 100%;
  }
</style>

關鍵實現以上兩部就可實現頭部預覽效果局部刷新。