一般在前端构建页面时,会进行弹窗,提示条,loading效果等方法的全局封装,在ant.design框架未出现之前,都还是自己进行封装的,只是最近想整理博客,想起来这部分内容还是想着放上来,也许会有人需要;本人现在也是使用ant.design较多,毕竟大厂开源,使用也很方便,为开发省了很多时间;
/* loading效果 */
export const bie = {
/**
* loading 效果
*
* 使用方法:出现:bie.loading(true); 消失:bie.loading(false);
* */
loading: (_switch) => {
const html = '<div class="bie-loading">' +
'<div class="fa fa-loading" id="loader-container">' +
'<p id="loadingText">loading</p>' +
'</div>' +
'</div>';
if (document.getElementsByClassName('bie-loading').length < 1) {
document.getElementById('root').insertAdjacentHTML('afterend', html);
}
if (_switch) {
document.getElementsByClassName('bie-loading')[0].style.display = 'flex';
document.getElementsByClassName('fa-loading')[0].style.marginTop = (document.body.clientHeight / 2) - 50;
} else {
document.getElementsByClassName('bie-loading')[0].style.display = 'none';
}
},
/**
* toast 效果
*
* 使用案例 bie.toast(true, '<p style="text-align: center">第一行展示效果!<br />第二行展示效果!</p>', 3000);
* */
toast: (_switch, content, timer) => {
const htmlToast = '<div class="bie-toast">' +
'<div class="fa fa-toast">' + content +
'</div>' +
'</div>';
if (document.getElementsByClassName('bie-toast').length < 1) {
document.getElementById('root').insertAdjacentHTML('afterend', htmlToast);
}
if (_switch) {
document.getElementsByClassName('bie-toast')[0].style.display = 'flex';
document.getElementsByClassName('fa-toast')[0].style.marginTop = (document.body.clientHeight / 2) - 50;
setTimeout(() => {
document.getElementsByClassName('bie-toast')[0].style.display = 'none';
}, timer || 1500);
} else {
document.getElementsByClassName('bie-toast')[0].style.display = 'none';
}
}
};