再component中创建loadding 组件
<template>
<div
class="markbox"
v-show="loading"
style="background-color: rgba(0, 0, 0, 0.8)"
>
<div class="sun-loading"></div>
</div>
</template>
<script>
export default {
name: "loading",
data() {
return {
loading: false,
};
},
created() {
var that = this;
this.bus.$on("loading", function (data) {
that.loading = !!data;
});
},
};
</script>
<style lang="less" scoped>
.markbox{
position: fixed;
width: 100%;
height: 100vh;
z-index: 100;
left: 0;
top: 0;
}
/*loading开始*/
.sun-loading {
width: 45px;
height: 45px;
display: block;
// animation: sunLoading 1s steps(12, end) infinite;
background: transparent url("../assets/images/big/loading.gif");
background-size: 100%;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/*loading结束*/
</style>
在Vue的原型上挂在一个标识（在man.js）
Vue.prototype.bus = new Vue;
开启与关闭
// 显示loading
// this.bus.$emit('loading', true);
// 关闭loading
// this.bus.$emit('loading', false);
效果图下
