vue- loading效果配置

<!-- loading.vue组件 -->
<template>
    <transition name="fade">
        <div class="loading-box" id="custom-loading" v-if="isShow">
            <div class="center">
                <span class="spinner-loader">Loading&#8230;</span>
                <div style="text-indent: -18px">拼命加载中...</div>
            </div>
        </div>
    </transition>
</template>
<script>
export default {
    props: {
        isShow: Boolean,
        load: {
            type: Number,
            default: 1
        }
    },
};
</script>
<style scoped>
.loading-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    color: #fff;
    display: flex;
}

.center {
    margin: auto;
}

@keyframes spinner-loader {
    0% {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.spinner-loader:not(:required) {
    -moz-animation: spinner-loader 1500ms infinite linear;
    -webkit-animation: spinner-loader 1500ms infinite linear;
    animation: spinner-loader 1500ms infinite linear;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
    -moz-box-shadow: rgba(255, 255, 255, 1) 1.5em 0 0 0, rgba(255, 255, 255, 1) 1.1em 1.1em 0 0, rgba(255, 255, 255, 1) 0 1.5em 0 0,
        rgba(255, 255, 255, 1) -1.1em 1.1em 0 0, rgba(255, 255, 255, 1) -1.5em 0 0 0, rgba(255, 255, 255, 1) -1.1em -1.1em 0 0,
        rgba(255, 255, 255, 1) 0 -1.5em 0 0, rgba(255, 255, 255, 1) 1.1em -1.1em 0 0;
    -webkit-box-shadow: rgba(255, 255, 255, 1) 1.5em 0 0 0, rgba(255, 255, 255, 1) 1.1em 1.1em 0 0, rgba(255, 255, 255, 1) 0 1.5em 0 0,
        rgba(255, 255, 255, 1) -1.1em 1.1em 0 0, rgba(255, 255, 255, 1) -1.5em 0 0 0, rgba(255, 255, 255, 1) -1.1em -1.1em 0 0,
        rgba(255, 255, 255, 1) 0 -1.5em 0 0, rgba(255, 255, 255, 1) 1.1em -1.1em 0 0;
    box-shadow: rgba(255, 255, 255, 1) 1.5em 0 0 0, rgba(255, 255, 255, 1) 1.1em 1.1em 0 0, rgba(255, 255, 255, 1) 0 1.5em 0 0,
        rgba(255, 255, 255, 1) -1.1em 1.1em 0 0, rgba(255, 255, 255, 1) -1.5em 0 0 0, rgba(255, 255, 255, 1) -1.1em -1.1em 0 0,
        rgba(255, 255, 255, 1) 0 -1.5em 0 0, rgba(255, 255, 255, 1) 1.1em -1.1em 0 0;
    display: inline-block;
    font-size: 10px;
    width: 1em;
    height: 1em;
    margin: 1.5em;
    overflow: hidden;
    text-indent: 100%;
}
</style>

load.js

// loading.js
import LoadingComponent from './Loading.vue'
const Loading = {
    install(Vue, options) {
        const LoadingPlugin = Vue.extend(LoadingComponent); //创建一个Vue子类
        const initLoading = new LoadingPlugin({
            el: document.createElement('div')
        })
        document.body.appendChild(initLoading.$el)
        Vue.prototype.$loading = {
            show: function(config) {
                if (config) {
                    initLoading.isShow = config.isShow
                }
            },
            hide: function(config) {
                if (config) {
                    initLoading.isShow = config.isShow
                }
            }
        };
        //Vue.prototype.$loading.hide({ isShow: false });
        Vue.prototype.$loadingFun = {
            show(options) {
                if (options) {
                    initLoading.isShow = options.Swicth;
                }
            },
            hide(options) {
                if (options) {
                    initLoading.isShow = options.Swicth;
                }
            },
        };
        // this.$loadingFun.show({
        //     Swicth:true
        // });
        // import Loading from './components/components/Loading/index'
        // Vue.use(Loading)
    }
}
export default Loading

这里说一下 export default ...

使用export取代module.exports。

// commonJS的写法
var React = require('react');

var Breadcrumbs = React.createClass({
  render() {
    return <nav />;
  }
});

module.exports = Breadcrumbs;

// ES6的写法
import React from 'react';

class Breadcrumbs extends React.Component {
  render() {
    return <nav />;
  }
};

export default Breadcrumbs;

在项目根目录下的main.js全局引入loading效果

import Loading from './components/components/Loading/index'
Vue.use(Loading)
具体用法是在你想用的地方
显示

　　Vue.prototype.$loading.show({

　　　　isShow: true

　　});

隐藏

   Vue.prototype.$loading.hide({

       isShow: false

   });