一、版本说明，参考 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 = 0let loadingfunction 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) returnneedLoadingRequestCount--if (needLoadingRequestCount === 0) {_.debounce(tryCloseLoading, 100)() //延迟100ms}}
三、Axios 请求文件中， request 拦截器开启加载，response 拦截器关闭加载
四、组件中请求时，添加{ showLoading: true }， 请求拦截时根据 'showLoading' 属性值（属性名可修改），添加加载效果
4.1、get / post 请求时，最后的参数添加 { showLoading: true }， 即可显示加载效果
五、加载效果图
写给自己的随笔，有问题欢迎指出(Θ▽Θ)
