在使用 Element UI 的 v-loading 指令时，如果页面内容过长，loading 遮罩层会相对于绑定元素进行定位。这就可能导致 loading 图标无法出现在当前视口中心

解决方法：以服务的方式调用

import { Loading } from 'element-ui';

let loadingInstance = Loading.service({
  lock: true,
  text: 'Loading...',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.3)'
});

// 在合适的时机关闭
this.$nextTick(() => { 
  loadingInstance.close();
});

封装全局方法

// main.js
import { Loading } from "element-ui";
Vue.prototype.$loading = Loading.service;

// 业务组件中
methods: {
  openLoading() {
    this.uploadLoading = this.$loading({
      lock: true,
      text: 'Loading',
      spinner: 'el-icon-loading',
      background: 'rgba(255, 255, 255, 0.6)',
    });
  },
  closeLoading() {
    this.uploadLoading?.close();
  }
}