vue2 全局封装loading js使用方法

1. 新建load js

// loading.js

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

const LoadingConstructor = Vue.extend(LoadingComponent)

Vue.prototype.$showLoading = function () {
  const instance = new LoadingConstructor()
  instance.$mount()
  document.body.appendChild(instance.$el)
}

Vue.prototype.$hideLoading = function () {
  const instances = document.querySelectorAll('.loading-component')
  instances.forEach(instance => {
    instance.parentNode.removeChild(instance)
  })
}

2. 再新建一个LoadingComponent.vue 这里你可以自主的开发你的load ui 状态

3.在组件中使用 

      this.$showLoading()  // 展示loading

     

      this.$hideLoading()   //关闭