直接引用element的loading，默认的是全屏loading，实际中有很多地方不需要全屏loading，只需要某部分loading，如上图
话不多说，直接上代码
封装好的loading.js
import Vue from 'vue'// loading框设置局部刷新，且所有请求完成后关闭loading框let loadinglet needLoadingRequestCount = 0 // 声明一个对象用于存储请求个数function startLoading (targetdq) {loading = Vue.prototype.$loading({lock: true,text: '努力加载中...',background: 'rgba(255,255,255,.4)',target: document.querySelector(targetdq) // 设置加载动画区域})}function endLoading () {loading.close()}export function showFullScreenLoading (targetdq) {if (needLoadingRequestCount === 0) {startLoading(targetdq)}needLoadingRequestCount++}export function hideFullScreenLoading () {if (needLoadingRequestCount <= 0) returnneedLoadingRequestCount--if (needLoadingRequestCount === 0) {endLoading()}}export default {showFullScreenLoading,hideFullScreenLoading}
在需要的页面中，import引入这个loading.js
然后，就可以直接
// 显示loadingshowFullScreenLoading('.right') // right是要显示loading的盒子// 隐藏loadinghideFullScreenLoading()
