elementui的loading加载的使用

• 创建Loading.js文件，从elementui中按需导入Loading

import { Loading } from 'element-ui'

通过方法调用loading的开启和关闭，并导出方法

let loading = null
const showLoading = (params) => {
    if(loading) {
        loading.close()
    }
    let options = {
        fullscreen: false,
        target: document.querySelector('#mainLoad'),
        lock: true,
        text: '数据加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    }
    Object.assign(
        options,
        params
    )
    loading = Loading.service(options)
}
const hideLoading = () => {
    loading.close()
}
export {
    showLoading,
    hideLoading
}

在使用的文件中导入这个loading.js文件

import { showLoading, hideLoading } from '../../config/Loading'

请求数据的时候调用

// 可以传入参数 
//  let options = {
//        fullscreen: false,
//        target: document.querySelector('#mainLoad'),
//        lock: true,
//        text: '数据加载中',
//        spinner: 'el-icon-loading',
//        background: 'rgba(0, 0, 0, 0.7)'
//    }
showLoading()

关闭loading

hideLoading()

当数据请求很快，会导致页面上的loading一闪而过，可以将loading状态添加到局部，只需传入target，或者在关闭方法中加上300毫秒的延时器