Vue.prototype.__loader_checks = [] Vue.prototype.$__loadingHTTP = new Proxy({}, { set: function (target, key, value, receiver) { let oldValue = target[key] if (!oldValue) { Vue.prototype.__loader_checks.forEach((func) => { func(key, value) }) } return Reflect.set(target, key, value, receiver) } }) axios.interceptors.request.use(config => { Vue.prototype.$__loadingHTTP[config.url] = config return config }) axios.interceptors.response.use(response => { delete Vue.prototype.$__loadingHTTP[response.config.url] return response })
将其挂载在Vue实例上，方便我们之后进行调用，当然还可以用Vuex，但此次插件要突出一个依赖少，所以Vuex还是不用啦。
直接挂载在Vue上的数据不能通过computed或者watch来监控数据变化，咱们用Proxy代理拦截set方法，每当有请求URL压入时就做点什么事。Vue.prototype.__loader_checks用来存放哪些实例化出来的组件订阅了请求URL时做加载的事件，这样每次有URL压入时，通过Proxy来分发给订阅过得实例化Loading组件。
订阅URL事件
<template> ... </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>
每一个都是一个崭新的实例，所以直接在mounted里订阅URL事件即可，只要有传入urls，就对__loader_checks里每一个订阅的对象进行发布，Loader实例接受到发布后会判断这个URL是否与自己注册的对应，对应的话会将自己的状态设置回加载，URL请求后势必会引起数据的更新，这时我们上面监控的source就会起作用将加载状态设置回完成。
使用槽来适配原来的组件
写完上面这些你可能有些疑问，怎么将Loading时不应该显示的部分隐藏呢？答案是使用槽来适配，
<template> <div> <div 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 v-if="isLoading" :key="'loading'"> </div> <slot v-else> </slot>
在有<slot>时，如果同级的标签同时出现v-if与CSS选择器且样式是scoped，那用CSS选择器设置的样式将会丢失，<div v-if="isLoading" :key="'loading'">如果没有设置key那.loading的样式会丢失，除了设置key还可以把它变成嵌套的<div v-if="isLoading"> <div></div> </div>。
注册成插件
Vue中的插件有四种注册方式，这里用mixin来混入到每个实例中，方便使用，同时我们也把上面的axios拦截器也注册在这里。
import axios import Loader from './loader.vue' export default { install (Vue, options) { Vue.prototype.__loader_checks = [] Vue.prototype.$__loadingHTTP = new Proxy({}, { set: function (target, key, value, receiver) { let oldValue = target[key] if (!oldValue) { Vue.prototype.__loader_checks.forEach((func) => { func(key, value) }) } return Reflect.set(target, key, value, receiver) } }) axios.interceptors.request.use(config => { Vue.prototype.$__loadingHTTP[config.url] = config return config }) axios.interceptors.response.use(response => { delete Vue.prototype.$__loadingHTTP[response.config.url] return response }) Vue.mixin({ beforeCreate () { Vue.component('v-loader', Loader) } }) } }
使用
在入口文件中使用插件
import Loader from './plugins/loader/index.js' ... Vue.use(Loader) ...
任意组件中无需导入即可使用
<v-loader :source="msg" :urls="['https://www.jb51.net/']"> <div @click="getRoot">{{ msg }}</div> </v-loader>
根据绑定的数据和绑定的URL自动进行Loading的显示与隐藏，无需手动设置isLoading是不是该隐藏，也不用调用show与hide在请求的方法里打补丁。
其他
上面的通过绑定数据来判断是否已经响应，如果请求后的数据不会更新，那你也可以直接在axios的response里做拦截进行订阅发布模式的响应。
最后