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() //关闭