简单封装toast提示效果

一般在前端构建页面时，会进行弹窗，提示条，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';
    }
  }
};