Vue靈活骨架屏組件封裝

骨架屏，就要精準定製才行

組件源碼及其完整示例，戳這裏👇👇👇👇👇

PC觀看示例更佳

示例戳這裏

源碼戳這裏

關於骨架屏概念

骨架屏，其實就給用戶展現一個頁面的大致骨架，不會讓用戶有等待時間過長的感受。實際也比菊花式加載用戶體驗也會好不少

個人骨架屏解決方案

既然是骨架屏，做爲一個用戶視覺緩衝工具，不少地方可能會用。爲了實現簡單，我封裝了一個骨架屏的組件。

原理

使用者將想要的佈局封裝爲一個樹狀的數據結構，而後讓組件去遞歸解析。

在這裏，我使用了Vue的遞歸組件。

<template>  
   <div class="skeleton-wrapper">    
     <div class="skeleton-content">     
       <item :paragraph="paragraph" :active="active"></item>    
     </div>  
   </div>
</template>複製代碼

let template =  `
      <div>
         <div v-if="paragraph.type === 'row'"            
           :class="paragraph.containerClass"            
           class="ske-row-container">          
           <div class="ske ske-row"               
                :style="row.rowStyle"               
                v-for="row in paragraph.rows"> 
                <item :paragraph="row" :active="active"></item> 
           </div>
         </div>      
         <div v-else-if="paragraph.type === 'col'" 
              :class="paragraph.containerClass"     
              class="ske-col-container">    
              <div class="ske ske-col"        
                   :style="col.colStyle"      
                   v-for="col in paragraph.cols">         
                   <item :paragraph="col" :active="active"></item>   
              </div>   
         </div>    
         <div v-else-if="paragraph.type === 'rect'"  
              :class="paragraph.containerClass"      
              class="ske-rect-container">  
              <div class="ske ske-rect"           
                   :class="{'ske-ani': active}"         
                   :style="paragraph.style"></div>  
         </div>   
        <div v-else-if="paragraph.type === 'circle'"      
             :class="paragraph.containerClass"      
             class="ske-circle-container">         
             <div class="ske ske-circle"         
                  :class="{'ske-ani': active}"            
                  :style="paragraph.style"> </div>    
        </div>  
     </div>`;

Vue.component('item', {
    name: "item",
    template: template,
    props: ["paragraph", "active"]
});複製代碼

經過解析一個樹狀的數據結構，進行遞歸調用渲染。最後渲染出整個骨架屏。

數據結構方面，能夠把一個總體分割開來。像上面的那個示例，我能夠把它分爲4行（row）。

而後每一行裏面，分別有一條矩形。矩形的css我也能夠定義

像這一個，能夠把它分割爲兩列（col）。而後第一列裏，有一個圓形。第二列裏則有兩個row(行)。上下兩行也是兩條矩形。

行裏面能夠嵌套列，列裏面也能夠嵌套行。可是圓形/矩形裏面就不可嵌套東西了

示例：

有哪些屬性？

目前僅支持 paragraph  和 active 兩個屬性。

• paragraph：骨架屏的數據，是一個標準格式的數據對象
  
• active：是否開啓動畫

paragraph Object

參數	說明	類型	可選值	默認值
type	父容器類型	string	col / row / rectangle / circle	none
cols / rows	子模塊數組	Array	-	false
style	矩形/圓形 主體的樣式	Object	-	{}
rowStyle / colStyle	矩形/圓形的主體其外部盒子的樣式	Object	-	{}