PC 全局loading的二次封装

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

import { ElLoading } from 'element-plus';   let loading = null; let loadingName = 'default'; let loadingStatus = false; const hideLoading = (name = 'default') => {   // 为了防止loading的一闪而过   if (name === loadingName) {     loadingStatus = false;     loadingName = '';     setTimeout(() => {       loading.close();     }, 500);   } };   /**  * loading页面  * @param params  * @param other 其他参数, { timeout: 超时时间, text: 提示文字}  */ const showLoading = (   name = 'default',   other = { timeout: 20, text: '数据加载中' }, ) => {   // 只允许一个loading出现   if (loadingStatus) {     return;   }   loadingStatus = true;   loadingName = name;     if (loading) {     loading.close();   }   let options = {     fullscreen: false,     lock: true,     text: other.text,     spinner: 'el-icon-loading',     // 添加类型，利于修改其样式     customClass: 'create-isLoading',     background: 'rgba(255, 255, 255, 0.9)',   };   const currentLoading = ElLoading.service(options);     let num = 0;   let timer = setInterval(() => {     num += 1;     if (num >= other.timeout) {       clearInterval(timer);       if (loading === currentLoading) {         hideLoading(name);       }     }   }, 1000);     loading = currentLoading; }; export { showLoading, hideLoading };