loading.ts 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. import { nextTick } from 'vue';
  2. import '/@/theme/loading.scss';
  3. /**
  4. * 页面全局 Loading
  5. * @method start 创建 loading
  6. * @method done 移除 loading
  7. */
  8. export const NextLoading = {
  9. // 创建 loading
  10. start: () => {
  11. const bodys: Element = document.body;
  12. const div = <HTMLElement>document.createElement('div');
  13. div.setAttribute('class', 'loading-next');
  14. const htmls = `
  15. <div class="loading-next-box">
  16. <div class="loading-next-box-warp">
  17. <div class="loading-next-box-item"></div>
  18. <div class="loading-next-box-item"></div>
  19. <div class="loading-next-box-item"></div>
  20. <div class="loading-next-box-item"></div>
  21. <div class="loading-next-box-item"></div>
  22. <div class="loading-next-box-item"></div>
  23. <div class="loading-next-box-item"></div>
  24. <div class="loading-next-box-item"></div>
  25. <div class="loading-next-box-item"></div>
  26. </div>
  27. </div>
  28. `;
  29. div.innerHTML = htmls;
  30. bodys.insertBefore(div, bodys.childNodes[0]);
  31. window.nextLoading = true;
  32. },
  33. // 移除 loading
  34. done: (time: number = 0) => {
  35. nextTick(() => {
  36. setTimeout(() => {
  37. window.nextLoading = false;
  38. const el = <HTMLElement>document.querySelector('.loading-next');
  39. el?.parentNode?.removeChild(el);
  40. }, time);
  41. });
  42. },
  43. };