加载页面全局设置spinning

1.在app.vue 文件中设置

<template>
<a-config-provider :locale="zh_CN">
  <a-spin :spinning="spinning" tip="加载中..." size="large">
    <router-view/>
  </a-spin>
</a-config-provider>
</template>
<script>
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');
export default {
  data() {
    return {
      zh_CN,
      spinning: false
    }
  },
  created(){
    this.$bus.$on("global-spinning", this.setSpinning)
  },
  methods: {
    setSpinning(spinning){
      this.spinning = spinning
    }
  }
}
</script>
<style lang="less">
html,body,#app{
  height: 100%;
}
.ant-spin-nested-loading{
  height: 100%;
}
.ant-spin-container{
  height: 100%;
}
</style>
 <style lang="less" src="@/assets/styles/zzwzui-basic.less"></style>

2.zzwzui-basicwenjian中写样式

// 加载中...
#app {
  // background: #000;
}

.ant-spin-spinning {
  position: absolute;
  top: calc(50% - 100px);
  left: 50%;
  z-index: 999999999999999999999;
  color: blue;
}

//旋转图标颜色
.ant-spin-lg .ant-spin-dot i {
  // background: #fff;
  background: blue;
}

.ant-spin-text{
  color: blue;

}

3.main.js引入

import VueBusPlugin from "./bus/bus"
Vue.use(VueBusPlugin)

4.添加bus.js文件

function VueBusPlugin(Vue) {
  const bus = new Vue()
  Object.defineProperty(Vue.prototype, '$bus', {
    get() {
      return bus
    }
  })
}

export default VueBusPlugin

5.在需要加载开始和加载暂停的地方控制开始和暂停
<-spin>在最外层
spinning设置初始值false
调用：

this.$bus.$emit("global-spinning", true);
        this.$bus.$emit("global-spinning", false);