loading的封装以及使用

element ui中loading的封装以及使用

import { Loading } from 'element-ui';
let loadingCount = 0;
let loading;

const startLoading = () => {
	loading = Loading.service({
		lock: true,
		text: '拼命加载中……',
		spinner: 'el-icon-loading',
		fullscreen: false,
		background: 'rgba(0, 0, 0, 0.3)',
		body: true,
		target: document.querySelector('.tableResult') as any
	});
	setTimeout(function () {
		loading.close();
	}, 5000);
};

const endLoading = () => {
	loading.close();
};

export const showLoading = () => {
	if (loadingCount === 0) {
		startLoading();
	}
	loadingCount += 1;
};

export const hideLoading = () => {
	if (loadingCount <= 0) {
		return;
	}
	loadingCount -= 1;
	if (loadingCount === 0) {
		endLoading();
	}
};

引入以及使用

import { showLoading, hideLoading } from './loading';
// 在axios请求中调用
showLoading();
hideLoading();