登录
原创

vue2-ElementUI-加载效果

发布于 2022-04-13 阅读 386
  • 前端
  • Vue.js
原创

前提:

  1. 安装了 axios
  2. 安装了ElementUI

使用方法:

1. 从ElementUI 中导入 Loading- - -

import { Loading } from 'element-ui';

2. 配置 axios 的请求和响应相关方法

axios.interceptors.request.use() 和 axios.interceptors.response.use() 都接收两个回调函数,第一个是成功的回调函数,第二个是失败的回调函数,失败的可以省略不写

a. 请求时,显示加载效果,配置- - -axios.interceptors.request.use() 方法

重点:调用- - - Loading.service() ,开始加载效果

// 声明请求拦截器
let loadingInstance = null
axios.interceptors.request.use((config) => {
  // 开启加载效果,全屏加载
  loadingInstance = Loading.service({ fullscreen: true})
  // 固定写法,返回请求成功结果
  return config
})

b. 请求成功得到响应结果后,关闭加载效果,配置- - -axios.interceptors.response.use() 方法

重点:调用- - - 加载对象.close(),关闭加载效果

// 声明相应拦截器
axios.interceptors.response.use((response) => {
  // 关闭加载效果
  loadingInstance.close()
  // 固定写法,返回相应成功结果
  return response
})

更多具体使用方法参考官网文档:https://element.eleme.cn/#/zh-CN/component/loading

评论区

零00
7粉丝

时光荏苒,我自清欢

0

0

0

举报