实现效果图
1、这里使用的是element-ui框架显示的loading,当然使用方法大同小异您可以使用其他框架或者自己写样式。
main.js
引入element-ui框架
import ElementUI from 'element-ui'
Vue.use(ElementUI)
2、main.js中配置拦截器
// 开始拦截
Vue.http.interceptors.push((request, next) => {
if (request.url.length > 0) { // 判断请求地址
let loadingInstance = ElementUI.Loading.service({ target: document.getElementById('loading'), fullscreen: false, text: '玩命加载中...' })
next((response) => {
// 请求完成,关闭loading框
// this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
loadingInstance.close()
// })
return response
})
}
})
配置参数
target Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串;若传入字符串,则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点 object/string — document.body
body 同 v-loading 指令中的 body 修饰符 boolean — false
fullscreen 同 v-loading 指令中的 fullscreen 修饰符 boolean — true
lock 同 v-loading 指令中的 lock 修饰符 boolean — false
text 显示在加载图标下方的加载文案 string — —
spinner 自定义加载图标类名 string — —
background 遮罩背景色 string — —
customClass Loading 的自定义类名 string — —
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。