自定义Loading组件

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

• 效果图下