elementUI loading提示使用

// 导入Loading 
import { Loading } from 'element-ui';

/** 
 * get方法，对应get请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function get(url, params) {
    let loadingInstance = Loading.service(
        {background: 'rgba(0, 0, 0, 0.7)', 
            text:'加载中', spinner: 'el-icon-loading'});
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        })
        .then(res => {
            resolve(res.data);
            loadingInstance.close()
        })
        .catch(err => {
            reject(err.data)
            loadingInstance.close()
        })
    });
}

添加在了axios封装的get和post请求中了，这样每次请求都会弹出加载界面，请求完都会消失。

 

如果和其他弹出框 比如 Dialog 冲突，那么可以调 Dialog zIndex 低于 2000, loading就会在上面 

<el-dialog title="添加用户" :visible.sync="dialogFormVisible" width="30%" center zIndex=1999>