封装组件，通过指令进行调用，类似于elementUI中的load

封装组件，通过指令进行调用，类似于elementUI中的loading组件

step1：搭建组件

<template>
  <div v-show="show" class="comp_loading" :style="{background: background}">
    <div class="loading_cont loading_fullscreen">
      <SvgIcon icon-class="loading" class="loading_icon"></SvgIcon>
    </div>
  </div>
</template>

<script>
  import SvgIcon from '@/components/SvgIcon'
  export default {
    name: "loading",
    components:{ SvgIcon },
    props:{
      show : Boolean ,
      background : String
    }
  }
</script>

step2：在组件同级文件夹下创建index.js文件，作为组件调用配置

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

let instance;
const loadingConstructor = Vue.extend(LoadingComponent);

instance = new loadingConstructor({
  el:document.createElement('div')
});

instance.show = false;

const loading = {
  show(options){
    instance.show = true;
    instance.background = options && options.background;
    document.body.appendChild(instance.$el);
  },
  close(){
    instance.show = false;
  }
};

export default {
  install(options = {}){
    if(!Vue.loading){
      Vue.$loading = loading;
    }
    Vue.mixin({
      created() {
        this.$loading = Vue.$loading;
      }
    })
  }
}

这里的设置实际上就是变相的利用install方法把loading指令挂载到页面上，这样全局都可以直接使用this.$loading进行调用

step3：全局挂载

在main.js中进行全局引用

import loading from './components/Loading'
Vue.use(loading);

至此，就可以全局引用loading组件

this.$loading.show({background:'transparent'});
 //调用loading 打开 background为其中配置样式，根据自己需求进行配置即可

或者

this.$loading.close(); // 调用loading 关闭