zoukankan      html  css  js  c++  java
  • PC 全局loading的二次封装

    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 };
    

      

  • 相关阅读:
    HDU
    01字典树模板
    扩展欧几里得和乘法逆元
    HDOJ-1156 Brownie Points II 线段树/树状数组(模板)
    CF-825E Minimal Labels 反向拓扑排序
    CF-831D Office Keys 思维题
    RMQ 解决区间查询问题
    hdu 5073 有坑+方差贪心
    hdu 5074 相邻数和最大dp
    hdu 5078 水题
  • 原文地址:https://www.cnblogs.com/daifuchao/p/15797688.html
Copyright © 2011-2022 走看看