一起写一个即插即用的Vue 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="['/']">
 <div @click="getRoot">{{ msg }}</div>
</v-loader>

根据绑定的数据和绑定的URL自动进行Loading的显示与隐藏，无需手动设置

isLoading

是不是该隐藏，也不用调用

show

与

hide

在请求的方法里打补丁。

测试地址

其他

上面的通过绑定数据来判断是否已经响应，如果请求后的数据不会更新，那你也可以直接在axios的response里做拦截进行订阅发布模式的响应。

最后

咳咳，又到了严(hou)肃(yan)认(wu)真(chi)求Star环节了，附上完整的项目地址(我不会告诉你上面的测试地址里的代码也很完整的，绝不会！)。