this.isLoading = true
}
})
}
}
}
</script>
<style scoped>
....
</style>
每一个都是一个崭新的实例，所以直接在mounted里订阅URL事件即可，只要有传入
urls，就对
__loader_checks里每一个订阅的对象进行发布，Loader实例接受到发布后会判断这个URL是否与自己注册的对应，对应的话会将自己的状态设置回加载，URL请求后势必会引起数据的更新，这时我们上面监控的
source就会起作用将加载状态设置回完成。
使用槽来适配原来的组件
写完上面这些你可能有些疑问，怎么将Loading时不应该显示的部分隐藏呢？答案是使用槽来适配，
<template>
<div>
<div class="loading" v-if="isLoading" :key="'loading'">
</div>
<slot v-else>
</slot>
</div>
</template>
<script>
export default { props: {
source: {
require: true
},
urls: {
type: Array,
default: () => { new Array() }
}
},
data () {
return { isLoading: true }
},
watch: {
source: function () {
if (this.source) {
this.isLoading = false
}
}
},
mounted: function () {
if (this.urls) {
this.__loader_checks.push((url, config) => {
if (this.urls.indexOf(url) !== -1) {
this.isLoading = true
}
})
}
}
}
</script>
<style scoped>
....
</style>
还是通过
isLoading判断，如果处于加载那显示转圈圈，否则显示的是父组件里传入的槽，这里写的要注意，Vue这里有一个奇怪的BUG，
<div class="loading" v-if="isLoading" :key="'loading'">
</div>
<slot v-else>
</slot>在有
<slot>时，如果同级的标签同时出现
v-if与
CSS选择器且样式是
scoped，那用
CSS选择器设置的样式将会丢失，
<div v-if="isLoading" :key="'loading'">
