vue自定义全局loading

//loading.vue
<template>
  <div class="load">
    <div class="load-content">
      <img :src="require('src/static/images/loading.gif')"/>
      <slot></slot>
    </div>
    <div class="load-mark"></div>
  </div>
</template>
<script>
export default {
  // loading组件
  name: 'loading'
}
</script>
<style scoped lang="less">
.load{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index: 4000;
  &-content{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scaleY(-50%);
    z-index: 4002;
    img{
      width:15%;
    }
  }
  &-mark{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 4001;
    background: #fff;
    opacity: 0.6;
  }
}
</style>

//loading/index.js
import load from './loading.vue'
import Vue from 'vue'
let _loading = null
const loading = {
  show(con = {}) {
    let Instance = Vue.extend(load)
    let vm = new Instance()
    for (let i in con) {
      vm[i] = con[i]
    }
    _loading = vm.$mount().$el
    document.body.appendChild(_loading)
  },
  clear() {
    if (_loading && _loading.contains && document.body.contains(_loading)) {
      document.body.removeChild(_loading)
      _loading = null
    } 
  }
}
export default loading