组件：src/components/loading/loading.vue
<template>
//...
</template>
<script>
export default {
data() {
visible:false
}
}
</script>
<style>
//...
</style>
src/components/loading/index.js
import Vue from 'vue'
import loading from './loading.vue'
const MyLoading = Vue.extend(loading)
const install = () => {
Vue.prototype.$loading = () => {
var instance = new MyLoading({
data:{
visible:true
}
})
instance.id = 'loading-component'
instance.vm = instance.$mount()
instance.vm.close = () => {
instance.visible = false
}
document.body.appendChild(instance.vm.$el)
return instance.vm
}
}
export default {
install
}
然后在main.js中引入
import Loading from './components/loading/index.js'
Vue.use(Loading)
然后在每个组件中都可以通过方法调用了。（示例3秒后关闭loading）
var loading = this.$loading()
setTimeout(()=>{
loading.close();//
},3000)
欢迎指正。。
