vue加载组件封装（有用到vant）

// index.js
import Vue from 'vue';
import Loading from './Loading';
export const loading = function(){
    let el = null;
    let vm = null;
    return function(ops){
        let defOps = {
            isShow: false, // 控制loading显示与隐藏
            callback: null,// 消失与出现回调
            mask: false, // 是否显示面具（遮罩层）
            zIndex: 100000
        }
        const LC = Vue.extend(Loading);
        if(ops && Object.prototype.toString.call(ops) === "[object Object]") for(let i in ops) defOps[i] = ops[i];
        if(vm) return vm;
        vm = new LC({
            el: document.createElement('div'),
            data(){
                return {
                    isShow: defOps.isShow,
                    mask: defOps.mask,
                    zIndex: defOps.zIndex
                }
            },
            methods: {
                start(mask){
                    const _t = this;
                    _t.isShow = true;
                    (typeof mask === 'boolean') && (_t.mask = mask);
                    defOps.callback && (typeof defOps.callback === 'function') && defOps.callback.call(this);
                    return _t;
                },
                stop(mask){
                    const _t = this;
                    _t.isShow = false;
                    _t.mask = false;
                    (typeof mask === 'boolean') && (_t.mask = mask);
                    defOps.callback && (typeof defOps.callback === 'function') && defOps.callback.call(this);
                    return _t;
                },
                destroy(){
                    el && document.body.removeChild(vm.$el);
                    return _t;
                }
            }
        });
        // 避免全局一直创建(中途vm被销毁情况)
        el && document.body.removeChild(el);
        el = vm.$el;
        document.body.appendChild(el);
        return vm;
    }
}()

// Loading.vue
<template>
    <div class="loading-box" :style="{ '--zIndex': zIndex }">
      <van-loading type="spinner" color="#1989fa" v-show="isShow" class="my-van-loading"/>
      <div class="mask" v-if="mask"/>
    </div>
</template>

<script>
export default {
    name: "LC"
}
</script>

<style lang="scss" scoped>
.loading-box {
  position: fixed;
  top:0;
  left:0;
  z-index: var(--zIndex);
  .mask{
    position: absolute;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background: transparent;
    opacity:0.8;
    z-index:1;
  }
  .my-van-loading{
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
  }
}
</style>