Vue.extend 创建全局loading

loading.vue

<template>
  <div v-if="spinning" class="loading-box">
    <a-spin tip="Loading..." :spinning="spinning"></a-spin>
  </div>
</template>

<script>
export default {
  name: "Loading",
  props: {
    spinning: Boolean,
  },
};
</script>

loading.js

import Vue from "vue";
import Loading from "./Loading.vue";
const comLoading = Vue.extend(Loading);
const instance = new comLoading({
  el: document.createElement("div"),
  propsData: {
    spinning: false
  }
});
const loading = {
  show() {
    instance.$props.spinning = true;
    document.body.appendChild(instance.$el);
  },
  hide() {
    instance.$props.spinning = false;
  },
};

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

main.js

import loading from "views/loading";
Vue.use(loading);

全局使用：

    this.$loading.show();
    this.$loading.hide();