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

      

  • 相关阅读:
    Java 开发环境配置
    JDBC数据批处理
    knockout.js简单实用教程1
    angular 入门教程1
    knockout简单实用教程3
    knockout简单实用教程2
    autofac使用笔记
    MVC WEB api 自动生成文档
    Unity IOC注入详细配置(MVC,WebApi)
    为什么php往mongo里插入整型数字8,变成了numberint(8)
  • 原文地址:https://www.cnblogs.com/daifuchao/p/15797688.html
Copyright © 2011-2022 走看看