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

<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>

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;
      }
    })
  }
}

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

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

import Vue from 'vue'
import { Loading } from 'element-ui'
let loadingInstance = null
const loading = {
  show(options) {
    loadingInstance = Loading.service({ text: '加载中', 'background': 'hsla(0,0%,100%,.7)' })
  },
  close() {
    if (loadingInstance) {
      loadingInstance.close()
    }
  }
}
export default {
  install(options = {}) {
    if (!Vue.loading) {
      Vue.$loading = loading
    }
    Vue.mixin({
      created() {
        this.$loading = Vue.$loading
      }
    })
  }
}