vue.js|加载页面全局设置spinning vue.js|html

1.在app.vue 文件中设置

> 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 } } } ="less"> html,body,#app{ height: 100%; } .ant-spin-nested-loading{ height: 100%; } .ant-spin-container{ height: 100%; } ="less" src="https://www.it610.com/article/@/assets/styles/zzwzui-basic.less">

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

【vue.js|加载页面全局设置spinning】5.在需要加载开始和加载暂停的地方控制开始和暂停
<-spin>在最外层
spinning设置初始值false
调用：