Vue + Element 实现请求加载数据时显示动效（ Loading 加载 ）

一、版本说明，参考 Element 官网

"vue": "^2.5.2",
"axios": "^0.18.1",
"element-ui": "^2.5.4"

 

二、封装加载文件的函数

2.1、在 src目录下 ，新建 api 目录， 新建 servicesHelp.js 文件

 

2.2、 servicesHelp.js 文件内容如下： 

          

import { Loading } from 'element-ui'
import _ from 'lodash'

let needLoadingRequestCount = 0
let loading

function startLoading() {
  loading = Loading.service({
    lock: true,
    text: '正在加载',
    background: 'rgba(0, 0, 0, 0)'
  })
}

function endLoading() {
  loading.close()
}

const tryCloseLoading = () => {
  if (needLoadingRequestCount === 0) {
    endLoading()
  }
}

export function showFullScreenLoading() {
  if (needLoadingRequestCount === 0) {
    startLoading()
  }
  needLoadingRequestCount++
}

export function tryHideFullScreenLoading() {
  if (needLoadingRequestCount <= 0) return
  needLoadingRequestCount--
  if (needLoadingRequestCount === 0) {
    _.debounce(tryCloseLoading, 100)()  //延迟100ms
  }
}

 

 

三、Axios 请求文件中， request 拦截器开启加载，response 拦截器关闭加载

 

 

四、组件中请求时，添加 { showLoading: true } ， 请求拦截时根据 'showLoading' 属性值（属性名可修改），添加加载效果

4.1、get / post 请求时，最后的参数添加 { showLoading: true }， 即可显示加载效果

 

 

五、加载效果图

 

 

写给自己的随笔，有问题欢迎指出(Θ▽Θ)