vue仿elementui自定义一个v-pageloading指令，开箱即用

• 创建一个loading文件夹。包含loading.vue、loading.js、index.js
• loading.vue 写布局及css样式
• 实例代码

<template>
    <div class="loading-container" v-show="loadingShow">
        <div class="pageloading">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                loadingShow: false,
            }
        }
    }
</script>

<style scoped>
    .loading-container{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        padding-top:100px;
        z-index: 99999999;
        background: rgba(255, 255, 255, 0.7);
    }
    .pageloading{
        width: 40px;
        /* height: 50px; */
        margin: 0 auto;
    }
    .pageloading span{
        display: inline-block;
        width: 5px;
        height: 100%;
        border-radius: 4px;
        background: lightgreen;
        -webkit-animation: load 1s ease infinite;
        animation: load 1s ease infinite;
    }
    @-webkit-keyframes load{
        0%,100%{
            height: 20px;
            background: lightgreen;
        }
        50%{
            height: 50px;
            margin: -15px 0;
            background: lightblue;
        }
    }
    @keyframes load{
        0%,100%{
            height: 20px;
            background: lightgreen;
        }
        50%{
            height: 50px;
            margin: -15px 0;
            background: lightblue;
        }
    }
    .pageloading span:nth-child(2){
        -webkit-animation-delay:0.2s;
        animation-delay:0.2s;
    }
    .pageloading span:nth-child(3){
        -webkit-animation-delay:0.4s;
        animation-delay:0.4s;
    }
    .pageloading span:nth-child(4){
        -webkit-animation-delay:0.6s;
        animation-delay:0.6s;
    }
    .pageloading span:nth-child(5){
        -webkit-animation-delay:0.8s;
        animation-delay:0.8s;
    }
</style>

• loading.js 显示隐藏逻辑处理
• 实例代码

import Vue from 'vue'
import pageLoading from './loading.vue'

const Mask = Vue.extend(pageLoading)

const toggleLoading = (el, binding) => {
	//el拿到loading挂载的元素，binding.value判断是否显示loading
    if (binding.value) {
        Vue.nextTick(() => {
            el.instance.loadingShow = true
            insertDom(el, el, binding)
        })
    } else {
        el.instance.loadingShow = false
    }
}

const insertDom = (parent, el) => {
    parent.appendChild(el.mask)
}

export default {
    bind: function (el, binding) {
        const mask = new Mask({
            el: document.createElement('div'),
            data() { }
        })
        el.instance = mask
        el.mask = mask.$el
        el.maskStyle = {}
        binding.value && toggleLoading(el, binding)
    },
    update: function (el, binding) {
        if (binding.oldValue !== binding.value) {
            toggleLoading(el, binding)
        }
    },
    unbind: function (el, binding) {
        el.instance && el.instance.$destroy()
        el = null
    }
}

• index.js 注册一个插件
• 实例代码

import pageloading from './loading.js'

export default {
    install (Vue) {
        Vue.directive('pageloading', pageloading)
    }
}

• 在main.js导入

import pageloading from './components/pageloading';
Vue.use(pageloading);

• 使用方式

<template>
	<div class="container" v-pageloading="pageloading">page</div>
	<button @click="changeLoading">打开/关闭loading</button>
</template>
<script>
	export default{
		data(){
			return {
				pageloading:false,
			}
		},
		methods:{
			changeLoading(){
				this.pageloading = !this.pageloading;
			}
		}
	}
</script>

• 最后附上一个大佬写的css loading样式 传送门