加载页面全局设置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);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！