vue 设置全局加载器

1、在app.vue 或入口文件中 添加 加载动画样式

<van-overlay :show="globalLoadShow" z-index="99999">
    <div class="globalLoading">
      <div class="block">
        <van-loading type="spinner" size="150" text-size="40" color="#fff" vertical>
          加载中...
        </van-loading>
      </div>
    </div>
</van-overlay>

//css
.globalLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 154px;
  height: 200px;
  /*background-color: #fff;*/
}

2、store.js 中设置变量

globalLoadShow: false,

3、在axios请求拦截器中打开，响应拦截器中关闭，

// 请求拦截
// config.silence === true 时，不需要开启加载中动画，默认无
axios.interceptors.request.use(
  config => {
    console.log(config, 'config')
    if (!config.silence) { // 非沉默请求则开启加载动画
      store.state.globalLoadShow = true
    }
    return config
  },
  error => {
    console.log(error, 'error')
    return Promise.reject(error)
  }
)

// 响应
axios.interceptors.response.use(
  response => {
    // console.log(response, 'response')
    store.state.globalLoadShow = false
    return response.data
  },
  error => {
    console.log('response err' + error) // for debug
    return Promise.reject(error)
  }
)