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);