加载表单添加Loading界面

相信有很多小伙伴在实际应用中，存在许多需要加载的大文件。在加载大文件的时候，由于浏览器的限制，可能需要花费一些时间，在这个时候需要加Loading这样的遮罩层。能够使得用户知道表单是在加载中，而不是“卡死”的情况，能够有效提升用户体验。当然，我们在v14也推出了增量加载，当导入大文件时建议使用增量加载以帮助优化初始加载时间。

具体效果如下，我们来看下如何实现吧。


首先我们需要提前准备一张loding的gif图，在加载的时候用。并且创建两个DOM，一个是加载的gif图，一个是不允许用户操作表单的遮罩层。
<div class='center' id="load"><img src="./o_loading.gif" alt=""></div>
<div id="ZZ"></div>


对应的样式如下，loding图我们就让他页面居中显示，遮罩层设置一些透明度使其覆盖整个页面。并且两者默认都是不显示。

1. .center {
   
2.   width: 100px;
   
3.   height: 100px;
   
4.   text-align: center;
   
5.   color: #fff;
   
6.   display: none;
   
7.   text-align: center;
   
8. }
   
9. #ZZ {
   
10.   display: none;
    
11.   position: absolute;
    
12.   top: 0%;
    
13.   left: 0%;
    
14.   width: 100%;
    
15.   height: 100%;
    
16.   background-color: black;
    
17.   z-index: 99999;
    
18.   -moz-opacity: 0.1;
    
19.   opacity: 0.1;
    
20.   filter: alpha(opacity=10);
    
21. }

复制代码

最后就是通过修改css的display属性使其显示或者隐藏。这里之所以用settimeout是因为刷新UI线程不应被js代码执行中断，添加setTimeout以提供浏览器刷新UI的机会。

1. document.getElementById("ZZ").style.display = "block";
   
2.     show(CenterDiv);
   
3. 
   
4.     setTimeout(function () {
   
5.       spread.fromJSON(data);
   
6. 
   
7.       hide(CenterDiv);
   
8.       document.getElementById("ZZ").style.display = "none";
   
9.     }, 0);

复制代码

下载附件即可查看完整代码

不是我想知道的，官方VUE的各个例子，是怎么做到的？

十亩苍烟 发表于 2022-3-9 14:32
不是我想知道的，官方VUE的各个例子，是怎么做到的？

请问你是指这个效果吗？这个本质就是用css做的。这个不属于spreadjs的支持内容，属于业务上的需求，建议你查找相关资料自行实现。

多谢，在官网找到了！

十亩苍烟 发表于 2022-3-11 12:19
多谢，在官网找到了！

不用客气，有新的关于SpreadJS的问题欢迎开新帖交流~

十亩苍烟 发表于 2022-3-11 12:19
多谢，在官网找到了！

想问下怎么做的

控制台找下class name和css样式，下图供参考：

这个功能咋在官网上没找到呢

您好，SpreadJS设计器本身是有加载效果的，但是如果没有使用设计器，只用了SpreadJS的话是没有加载效果的，您可以参考这篇文章自行实现。