Vue实现全局Loading插件

1、全局插件，调用this.$loadDialog()，通过this.$closeLoading()关闭。

2、全屏展示。(扩展：可通过定位实现具体版块的加载效果。此文未实现！)

3、支持自定义加载内容或样式。

Use： main.js

import Loading from './plugin/Loading';
Vue.use(Loading);

import Vue from 'vue';
import loadDialog from './loading.vue';

const LoadDialog = (config) => {
    let options = {
        className: 'loader-chart',
        messageTip: '加载中，请稍后'
    };
    if (config && typeof config !== 'object') {
        options.content = config;
    }
    config = { ...options, ...config };

    let Tpl = Vue.extend(loadDialog);
    let instance = new Tpl();
    for (let key in config) {
        if (config.hasOwnProperty(key)) instance.$data[key] = config[key];
    }
    document.body.appendChild(instance.$mount().$el);
};

const closeLoading = () => {
    let loadList = document.querySelectorAll('.load-loading-dialog');
    for (let i = 0; i < loadList.length; i++) {
        document.body.removeChild(loadList[i]);
    }
}

export default {
    install () {
        Vue.prototype.$loadDialog = LoadDialog.bind(Vue);
        Vue.prototype.$closeLoading = closeLoading.bind(Vue);
    }
};

<template>
    <div class="hart_loading load-loading-dialog">
        <div class="box">
            <div :class="className"></div>
            <p v-if="messageTip" class="tip-msg">{{ messageTip }}</p>
        </div>
    </div>
</template>

<script type="text/javascript">
export default {
    props:{
        loadShow: {
            type: Boolean,
            default: true
        },
        className: {
            type:String,
            default:'loader-chart'
        },
        messageTip: {
            type: String,
            default: ''
        }
    },
    created() {
        console.log('>>>>>>', this.loadShow);
        
    }
}

</script>

<style lang="scss" scoped>
.hart_loading{
	width: 100%;
	height: 100%;
	position: absolute;
    top: 0;
	left: 0;
    z-index: 9999;
	background-color: #fff;
    border: 1px solid #fff;
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-items: center;
    .box {
        display: inline-block;
        border-radius: 3px;
        font-size: 30px;
        color: #5caeea;
        padding: 1em;
        margin-bottom: .25em;
        vertical-align: top;
        -webkit-transition: .3s color, .3s border;
        transition: .3s color, .3s border;
        [class*="loader-"] {
            display: inline-block;

            color: inherit;
            vertical-align: middle;
            pointer-events: none;
            position: relative;
            top: 40%;
            left: 50%;
            transform:translate(-50%,-50%)

        }
        .loader-chart {
            width: 1em;
            height: 1em;
            border: .2em solid transparent;
            border-top-color: currentcolor;
            border-radius: 50%;
            -webkit-animation: 1s loader-05 linear infinite;
            animation: 1s loader-05 linear infinite;
            top: 34%;
            left: 50%;
            margin-left: -15px;
            &:before{
                content: '';
                display: block;
                width: inherit;
                height: inherit;
                position: absolute;
                top: -.2em;
                left: -.2em;
                border: .2em solid currentcolor;
                border-radius: 50%;
                opacity: .5;
            }
        }
        .loader-iframe {
            width: 1.5em;
            height: 1.5em;
            border: .05em solid #5264D9;
            border-bottom-color: transparent;
            border-radius: 50%;
            -webkit-animation: 0.7s loader-03 linear infinite;
            animation: 0.7s loader-03 linear infinite;
        }
    }
}
@-webkit-keyframes loader-05 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes loader-05 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


@-webkit-keyframes loader-03 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes loader-03 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
</style>

<style scoped>
.tip-msg{
    width: 100%;
    text-align: center;
    font-size: 14px;
}
</style>