提升用户体验的利器——使用Vue-Occupy实现占位效果

摘要：项目地址介绍是一个指令，能够在数据被加载之前使用一个可配置的色块进行占位，能够有效提升用户体验。当数据被成功返回后，色块将会被替换成的内容。

项目地址：https://github.com/jrainlau/v...
DEMO：https://jrainlau.github.io/vu...

Vue-Occupy是一个vue指令，能够在数据被加载之前使用一个可配置的色块进行占位，能够有效提升用户体验。

使用yarn或者npm的方式进行安装：

# yarn
yarn add vue-occupy

# npm
npm install vue-occupy

进入项目入口文件，添加以下代码：

import VueOccupy from "vue-occupy"

Vue.use(VueOccupy)

这样，vue-occupy已经被注册为一个全局的指令，你可以在任意.vue文件里面通过v-occupy使用。

举例：

在fetch方法返回数据之前，

注意：vue-occupy的默认配置项是这样的：

{
  width: 100%; 
  height: 100%; 
  background: #eee
}

经过vue-occupy处理的节点会变成下面这样：

  

                 

                                                                                                                    
                         GPU服务器
                                             
                         服务器托管
                                                                                                                                                 
                                      
                     
                    
                                                                                               用户体验的
                                                                                                           用户体验的要素
                                                                                                           js实现f11的效果
                                                                                                           使用cdn加速的直观体验
                                                         
                 
               
              
             
               

                   
 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
                 
                   
转载请注明本文地址：https://www.ucloud.cn/yun/88155.html
               
                      
               

                 
                                  
上一篇：Unable to preventDefault inside passive event list
  
                                                
                                       
下一篇：我的WebPack入门（一）
                                  
              
              

                
相关文章
                

                             
                                                                                                    

                                                

                          
C4J私有化的小程序数据统计分析
                                                     
摘要：私有化私有化解决方案有效的防止了用户数据的泄露，为业务提供强有力的数据支撑，深度分析更容易，数据应用灵活更安全，定制化贴近业务。

线上流量红利逐渐消失的今天，产品的获客成本从几元，飙升到了现在的几百元，甚至上千元，流量大战悄然打响！而 微信社会中的小程序，凭借着离消费者一指之遥的距离，成为商家不被淘汰的制胜法宝 。2019年4月，开源的用户行为分析厂商Cobub推出全渠道的用户增长利器...
                                                   
                          

                                

                                    Kaede
                                    2019-08-16 16:41
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
React 动态渲染图片，提升用户体验
                                                     
摘要：给服务器发送一个获取图片文件的请求，但是先不在中渲染，直到整个文件都下载完成以后再渲染出来占位符是提前让用户产生预期，预期图片正在加载。

作者：Andrew Wong 编译：胡子大哈 
翻译原文：http://huziketang.com/blog/posts/detail?postId=58d14215a6d8a07e449fdd2b 英文原文：Improve Your UX by ...
                                                   
                          

                                

                                    FullStackDeveloper
                                    2019-08-20 15:16
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
一招鲜吃遍天，做好混合云，这招管用
                                                     
摘要：俗语有一招鲜，吃遍天。其中，的企业正在实施多云战略，的企业采用混合云战略，将公有云和私有云集成在一起。随着混合云的五个一体化由戴尔易安信在戴尔科技峰会上对外发布，其混合云的新利器也正式登台亮相了。俗语有一招鲜，吃遍天。说的是行走江湖须得有一技之长，方能到处谋生，不会饿了肚子。时过境迁，这句话放在今天依然有效。随着IT环境正向混合云以及多云迈进，这一过程有没有一招鲜的方法呢？让客户省时省力又省...
                                                   
                          

                                

                                    iOS122
                                    2019-04-30 17:35
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
压箱底宝藏！程序员必不可少的8款办公利器
                                                     
摘要：工欲善其事，必先利其器。对于程序员来说，一款得心应手的好工具能够让开发工作效率倍增。这就像下的和下的，能够实现不同应用程序之间的切换。并不单纯的是一款标签页搜索工具，它能够在使用过程中挂起未使用的选项卡，以此来释放内存，提高性能。                                                    工欲善其事，必先利其器。 对于程序员来说，一款得心应手的好工...
                                                   
                          

                                

                                    LiuZh
                                    2021-09-08 09:36
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                           
                
              
              
               

                  
                  
发表评论
                   

                                      
                      

                        登陆后可评论
                      
                   
               
              

                

                  
0条评论