从零开始，来做个Vue全局loading组件

前言

最近公司项目需要开发一个全局loading组件，之前没有做过类似的功能，通过百度东拼西凑完成了这个功能，但是也是知其然而不知其所以然，所以今天抽空来整理学习下。

Demo

首先在components文件夹下新建一个loading文件夹，该文件夹下包含Index.vue和Index.js两个文件。

Index.vue

<template>
    <div class="loading" v-if="show">
        <van-loading type="spinner" size="100px" color="#1989fa" vertical>努力加载中...</van-loading>
    </div>
</template>

<script>
export default {
    name: "Loading",
    props: {
        show: Boolean
    },
};
</script>

<style lang="scss" scoped>
.loading {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba($color: #fff, $alpha: 1);
    .van-loading {
        top: 50%;
        transform: translate(0, -50%);
        .van-loading__text {
            margin: 15px 0 0 0;
            font-size: 18px;
        }
    }
}
</style>

Index.js

import Vue from "vue"
import loadingComponent from "./Index.vue"

// 引入组件的.vue文件创建构造器
let LoadingConstructor = Vue.extend(loadingComponent)

// 渲染并且随后挂载
let instance = new LoadingConstructor().$mount()
document.body.appendChild(instance.$el)

instance.show = false

let loading = {
    show() {
        instance.show = true
    },
    hide() {
        instance.show = false
    }
}

// 注册组件
export default {
    install() {
        if (!Vue.$loading) {
            Vue.$loading = loading
        }
        Vue.mixin({
            created() {
                this.$loading = Vue.$loading
            }
        })
    }
}

然后在main.js里面引入一下该组件。

main.js

// 引入loading
import Loading from "@/components/Loading/Index.js"
Vue.use(Loading);

因为项目需要，所以这边引用了VantUi框架做了个全屏loading，你们可以根据自己项目进行修改，然后就可以使用this.$loading.show()和this.$loading.hide()来操作全局loading组件了。

项目中使用的API

构造：Vue.extend()

挂载：vm.$mount()

注册：install()