組件：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)

然后在每個(gè)組件中都可以通過方法調(diào)用了。（示例3秒后關(guān)閉loading）

var loading = this.$loading()

setTimeout(()=>{

? ? loading.close();//

},3000)

歡迎指正。。