前言

整个页面添加loading导致菜单无法切换，接口返回较慢时，页面感知太卡，不流畅。

---

[Element-ui局部添加loading效果]

image.png

步骤如下：

<el-main class="custom-el-isLoading">
    <keep-alive>
        <router-view v-if="$route.meta.noCache" class="content custom-el-isLoading" />
    </keep-alive>
    <router-view v-if="!$route.meta.noCache" class="content custom-el-isLoading" />
</el-main>

import axios from 'axios';
import { showLoading, hideLoading } from '@/utils/message.js';

const TTMEOUT = 1000000

export const request = axios.create({
  baseURL: process.env.VUE_APP_URL,
  timeout: TTMEOUT,
});

request.interceptors.request.use(config => {
  const loadingTarget = window.document.querySelector('.custom-el-isLoading');
  loadingTarget && showLoading({ target: loadingTarget })
  setTimeout(() => {
      hideLoading()
    }, 1000);
});

// response拦截器
request.interceptors.response.use(response => {
  const config = response.config.config
  if(config&&!config.IS_CUSTOM_LOADING){
    hideLoading()
  }
});

message.js

const { Loading } = require('element-ui');

let loading = null;
let needRequestCount = 0;

const startLoading = (headers={}) => {
  loading = Loading.service({
    lock: false,
    text: headers.text || '',
    background: 'rgb(255, 255, 255, 0.4)',
    target: headers.target || 'body'
  });
};

const endLoading = _.debounce(() => {
  loading && loading.close();
  loading = null;
},300);

export const showLoading = headers => {
  if(needRequestCount == 0&&!loading){
    startLoading(headers);
  }
  needRequestCount++;
}

export const hideLoading = () => {
  if(needRequestCount<=0) return
  needRequestCount--;
  needRequestCount = Math.max(needRequestCount, 0);
  if(needRequestCount<=0){
    endLoading()
  }
}