From 00c910fd701f0eace99a9c75e818c7c965fa3f63 Mon Sep 17 00:00:00 2001
From: Y <anly_yaw@163.com>
Date: Thu, 18 Apr 2024 10:15:14 +0800
Subject: [PATCH] feat(Skeleton): sfc changed to tsx (#1301)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(Skeleton): sfc changed to tsx

* test: update test

* test: update snapshots

* feat(Skeleton): use usePrefixClass() to calculate the class prefix

* docs: sync api

---------

Co-authored-by: 黎伟杰 <674416404@qq.com>
---
 .../__test__/__snapshots__/demo.test.jsx.snap |  84 +++-
 .../__test__/__snapshots__/demo.test.jsx.snap | 168 ++++++--
 .../__test__/__snapshots__/demo.test.jsx.snap | 364 ++++++++++++++----
 src/skeleton/__test__/index.test.jsx          |   2 +-
 src/skeleton/index.ts                         |   2 +-
 src/skeleton/skeleton.en-US.md                |   2 +-
 src/skeleton/skeleton.md                      |   2 +-
 src/skeleton/skeleton.tsx                     | 138 +++++++
 src/skeleton/skeleton.vue                     | 119 ------
 9 files changed, 626 insertions(+), 255 deletions(-)
 create mode 100644 src/skeleton/skeleton.tsx
 delete mode 100644 src/skeleton/skeleton.vue

diff --git a/src/back-top/__test__/__snapshots__/demo.test.jsx.snap b/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
index 4071190c5..922447167 100644
--- a/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/back-top/__test__/__snapshots__/demo.test.jsx.snap
@@ -296,6 +296,7 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
           data-v-806aae90=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -303,7 +304,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -312,7 +315,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -322,16 +327,20 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 100px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         <div
           class="t-skeleton item"
           data-v-806aae90=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -339,7 +348,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -348,7 +359,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -358,16 +371,20 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 100px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         <div
           class="t-skeleton item"
           data-v-806aae90=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -375,7 +392,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -384,7 +403,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -394,16 +415,20 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 100px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         <div
           class="t-skeleton item"
           data-v-806aae90=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -411,7 +436,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -420,7 +447,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -430,16 +459,20 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 100px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         <div
           class="t-skeleton item"
           data-v-806aae90=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -447,7 +480,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -456,7 +491,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -466,16 +503,20 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 100px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         <div
           class="t-skeleton item"
           data-v-806aae90=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -483,7 +524,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -492,7 +535,9 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -502,10 +547,13 @@ exports[`BackTop > BackTop mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 100px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         
       </div>
diff --git a/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap b/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
index 831220113..16d4106fc 100644
--- a/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/pull-down-refresh/__test__/__snapshots__/demo.test.jsx.snap
@@ -65,13 +65,16 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
               data-v-9c770ec0=""
             >
               
+              
               <div
                 class="t-skeleton__row"
               >
                 
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -81,7 +84,9 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 100px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -91,23 +96,29 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               
+              
             </div>
             <div
               class="t-skeleton item"
               data-v-9c770ec0=""
             >
               
+              
               <div
                 class="t-skeleton__row"
               >
                 
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -117,7 +128,9 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 100px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -127,23 +140,29 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               
+              
             </div>
             <div
               class="t-skeleton item"
               data-v-9c770ec0=""
             >
               
+              
               <div
                 class="t-skeleton__row"
               >
                 
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -153,7 +172,9 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 100px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -163,23 +184,29 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               
+              
             </div>
             <div
               class="t-skeleton item"
               data-v-9c770ec0=""
             >
               
+              
               <div
                 class="t-skeleton__row"
               >
                 
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -189,7 +216,9 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 100px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -199,23 +228,29 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               
+              
             </div>
             <div
               class="t-skeleton item"
               data-v-9c770ec0=""
             >
               
+              
               <div
                 class="t-skeleton__row"
               >
                 
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -225,7 +260,9 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 100px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -235,23 +272,29 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               
+              
             </div>
             <div
               class="t-skeleton item"
               data-v-9c770ec0=""
             >
               
+              
               <div
                 class="t-skeleton__row"
               >
                 
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -261,7 +304,9 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 100px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               <div
@@ -271,10 +316,13 @@ exports[`PullDownRefresh > PullDownRefresh baseVue demo works fine 1`] = `
                 <div
                   class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                   style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                />
+                >
+                  <!---->
+                </div>
                 
               </div>
               
+              
             </div>
             
           </div>
@@ -396,13 +444,16 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                 data-v-9c770ec0=""
               >
                 
+                
                 <div
                   class="t-skeleton__row"
                 >
                   
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -412,7 +463,9 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 100px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -422,23 +475,29 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 
+                
               </div>
               <div
                 class="t-skeleton item"
                 data-v-9c770ec0=""
               >
                 
+                
                 <div
                   class="t-skeleton__row"
                 >
                   
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -448,7 +507,9 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 100px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -458,23 +519,29 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 
+                
               </div>
               <div
                 class="t-skeleton item"
                 data-v-9c770ec0=""
               >
                 
+                
                 <div
                   class="t-skeleton__row"
                 >
                   
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -484,7 +551,9 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 100px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -494,23 +563,29 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 
+                
               </div>
               <div
                 class="t-skeleton item"
                 data-v-9c770ec0=""
               >
                 
+                
                 <div
                   class="t-skeleton__row"
                 >
                   
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -520,7 +595,9 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 100px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -530,23 +607,29 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 
+                
               </div>
               <div
                 class="t-skeleton item"
                 data-v-9c770ec0=""
               >
                 
+                
                 <div
                   class="t-skeleton__row"
                 >
                   
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -556,7 +639,9 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 100px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -566,23 +651,29 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 
+                
               </div>
               <div
                 class="t-skeleton item"
                 data-v-9c770ec0=""
               >
                 
+                
                 <div
                   class="t-skeleton__row"
                 >
                   
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -592,7 +683,9 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 100px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 <div
@@ -602,10 +695,13 @@ exports[`PullDownRefresh > PullDownRefresh mobileVue demo works fine 1`] = `
                   <div
                     class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                     style="width: 165.5px; height: 165.5px; border-radius: 12px;"
-                  />
+                  >
+                    <!---->
+                  </div>
                   
                 </div>
                 
+                
               </div>
               
             </div>
diff --git a/src/skeleton/__test__/__snapshots__/demo.test.jsx.snap b/src/skeleton/__test__/__snapshots__/demo.test.jsx.snap
index 73f9bb795..b0bfe60e0 100644
--- a/src/skeleton/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/skeleton/__test__/__snapshots__/demo.test.jsx.snap
@@ -23,13 +23,16 @@ exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
         data-v-5431dabc=""
       >
         
+        
         <div
           class="t-skeleton__row"
         >
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -38,7 +41,9 @@ exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -47,7 +52,9 @@ exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -57,10 +64,13 @@ exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
             style="width: 55%;"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         
+        
       </div>
     </div>
   </div>
@@ -82,13 +92,16 @@ exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
         data-v-5431dabc=""
       >
         
+        
         <div
           class="t-skeleton__row"
         >
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -97,7 +110,9 @@ exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -106,7 +121,9 @@ exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -116,10 +133,13 @@ exports[`Skeleton > Skeleton animationVue demo works fine 1`] = `
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
             style="width: 55%;"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         
+        
       </div>
     </div>
   </div>
@@ -141,6 +161,7 @@ exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
       data-v-b5595f68=""
     >
       
+      
       <div
         class="t-skeleton__row"
       >
@@ -148,16 +169,20 @@ exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
         <div
           class="t-skeleton__col t-skeleton--type-circle t-skeleton--animation-none"
           style="width: 48px; height: 48px;"
-        />
+        >
+          <!---->
+        </div>
         
       </div>
       
+      
     </div>
     <div
       class="t-skeleton group-content"
       data-v-b5595f68=""
     >
       
+      
       <div
         class="t-skeleton__row"
       >
@@ -165,7 +190,9 @@ exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
         <div
           class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
           style="width: 50%;"
-        />
+        >
+          <!---->
+        </div>
         
       </div>
       <div
@@ -175,10 +202,13 @@ exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
         <div
           class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
           style="width: 100%;"
-        />
+        >
+          <!---->
+        </div>
         
       </div>
       
+      
     </div>
   </div>
   <div
@@ -190,6 +220,7 @@ exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
       data-v-b5595f68=""
     >
       
+      
       <div
         class="t-skeleton__row"
       >
@@ -197,16 +228,20 @@ exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
         <div
           class="t-skeleton__col t-skeleton--type-rect t-skeleton--animation-none"
           style="width: 48px; height: 48px;"
-        />
+        >
+          <!---->
+        </div>
         
       </div>
       
+      
     </div>
     <div
       class="t-skeleton group-content"
       data-v-b5595f68=""
     >
       
+      
       <div
         class="t-skeleton__row"
       >
@@ -214,7 +249,9 @@ exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
         <div
           class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
           style="width: 50%;"
-        />
+        >
+          <!---->
+        </div>
         
       </div>
       <div
@@ -224,10 +261,13 @@ exports[`Skeleton > Skeleton cellGroupVue demo works fine 1`] = `
         <div
           class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
           style="width: 100%;"
-        />
+        >
+          <!---->
+        </div>
         
       </div>
       
+      
     </div>
   </div>
   
@@ -239,6 +279,7 @@ exports[`Skeleton > Skeleton gridVue demo works fine 1`] = `
   class="t-skeleton"
 >
   
+  
   <div
     class="t-skeleton__row"
   >
@@ -246,23 +287,33 @@ exports[`Skeleton > Skeleton gridVue demo works fine 1`] = `
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 48px; border-radius: 6px;"
-    />
+    >
+      <!---->
+    </div>
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 48px; border-radius: 6px;"
-    />
+    >
+      <!---->
+    </div>
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 48px; border-radius: 6px;"
-    />
+    >
+      <!---->
+    </div>
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 48px; border-radius: 6px;"
-    />
+    >
+      <!---->
+    </div>
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 48px; border-radius: 6px;"
-    />
+    >
+      <!---->
+    </div>
     
   </div>
   <div
@@ -272,26 +323,37 @@ exports[`Skeleton > Skeleton gridVue demo works fine 1`] = `
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 16px; border-radius: 3px;"
-    />
+    >
+      <!---->
+    </div>
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 16px; border-radius: 3px;"
-    />
+    >
+      <!---->
+    </div>
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 16px; border-radius: 3px;"
-    />
+    >
+      <!---->
+    </div>
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 16px; border-radius: 3px;"
-    />
+    >
+      <!---->
+    </div>
     <div
       class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
       style="width: 48px; height: 16px; border-radius: 3px;"
-    />
+    >
+      <!---->
+    </div>
     
   </div>
   
+  
 </div>
 `;
 
@@ -305,6 +367,7 @@ exports[`Skeleton > Skeleton imageGroupVue demo works fine 1`] = `
     data-v-ac6b2376=""
   >
     
+    
     <div
       class="t-skeleton__row"
     >
@@ -312,7 +375,9 @@ exports[`Skeleton > Skeleton imageGroupVue demo works fine 1`] = `
       <div
         class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
         style="width: 163.5px; height: 163.5px; border-radius: 12px;"
-      />
+      >
+        <!---->
+      </div>
       
     </div>
     <div
@@ -321,7 +386,9 @@ exports[`Skeleton > Skeleton imageGroupVue demo works fine 1`] = `
       
       <div
         class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-      />
+      >
+        <!---->
+      </div>
       
     </div>
     <div
@@ -331,16 +398,20 @@ exports[`Skeleton > Skeleton imageGroupVue demo works fine 1`] = `
       <div
         class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
         style="width: 61%;"
-      />
+      >
+        <!---->
+      </div>
       
     </div>
     
+    
   </div>
   <div
     class="t-skeleton"
     data-v-ac6b2376=""
   >
     
+    
     <div
       class="t-skeleton__row"
     >
@@ -348,7 +419,9 @@ exports[`Skeleton > Skeleton imageGroupVue demo works fine 1`] = `
       <div
         class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
         style="width: 163.5px; height: 163.5px; border-radius: 12px;"
-      />
+      >
+        <!---->
+      </div>
       
     </div>
     <div
@@ -357,7 +430,9 @@ exports[`Skeleton > Skeleton imageGroupVue demo works fine 1`] = `
       
       <div
         class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-      />
+      >
+        <!---->
+      </div>
       
     </div>
     <div
@@ -367,10 +442,13 @@ exports[`Skeleton > Skeleton imageGroupVue demo works fine 1`] = `
       <div
         class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
         style="width: 61%;"
-      />
+      >
+        <!---->
+      </div>
       
     </div>
     
+    
   </div>
 </div>
 `;
@@ -429,6 +507,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             data-v-7e69da81=""
           >
             
+            
             <div
               class="t-skeleton__row"
             >
@@ -436,10 +515,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               <div
                 class="t-skeleton__col t-skeleton--type-circle t-skeleton--animation-none"
                 style="width: 48px; height: 48px;"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             
+            
           </div>
         </div>
       </div>
@@ -461,6 +543,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             data-v-7e69da81=""
           >
             
+            
             <div
               class="t-skeleton__row"
             >
@@ -468,10 +551,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               <div
                 class="t-skeleton__col t-skeleton--type-rect t-skeleton--animation-none"
                 style="width: 72px; height: 72px;"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             
+            
           </div>
         </div>
       </div>
@@ -493,6 +579,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             data-v-7e69da81=""
           >
             
+            
             <div
               class="t-skeleton__row"
             >
@@ -500,11 +587,15 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                 style="width: 24%; height: 16px; margin-right: 16px;"
-              />
+              >
+                <!---->
+              </div>
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                 style="width: 76%; height: 16px;"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -513,10 +604,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             
+            
           </div>
         </div>
       </div>
@@ -538,13 +632,16 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             data-v-7e69da81=""
           >
             
+            
             <div
               class="t-skeleton__row"
             >
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -553,7 +650,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -562,7 +661,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -572,10 +673,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
                 style="width: 55%;"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             
+            
           </div>
         </div>
       </div>
@@ -611,6 +715,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
           data-v-b5595f68=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -618,16 +723,20 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-circle t-skeleton--animation-none"
               style="width: 48px; height: 48px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         <div
           class="t-skeleton group-content"
           data-v-b5595f68=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -635,7 +744,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 50%;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -645,10 +756,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 100%;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
       </div>
       <div
@@ -660,6 +774,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
           data-v-b5595f68=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -667,16 +782,20 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-rect t-skeleton--animation-none"
               style="width: 48px; height: 48px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         <div
           class="t-skeleton group-content"
           data-v-b5595f68=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -684,7 +803,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 50%;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -694,10 +815,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 100%;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
       </div>
       
@@ -727,6 +851,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
         data-v-9b6b90cc=""
       >
         
+        
         <div
           class="t-skeleton__row"
         >
@@ -734,23 +859,33 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 48px; border-radius: 6px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 48px; border-radius: 6px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 48px; border-radius: 6px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 48px; border-radius: 6px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 48px; border-radius: 6px;"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -760,26 +895,37 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 16px; border-radius: 3px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 16px; border-radius: 3px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 16px; border-radius: 3px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 16px; border-radius: 3px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 48px; height: 16px; border-radius: 3px;"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         
+        
       </div>
       
     </div>
@@ -812,6 +958,7 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
           data-v-ac6b2376=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -819,7 +966,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 163.5px; height: 163.5px; border-radius: 12px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -828,7 +977,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -838,16 +989,20 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 61%;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
         <div
           class="t-skeleton"
           data-v-ac6b2376=""
         >
           
+          
           <div
             class="t-skeleton__row"
           >
@@ -855,7 +1010,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 163.5px; height: 163.5px; border-radius: 12px;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -864,7 +1021,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           <div
@@ -874,10 +1033,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             <div
               class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
               style="width: 61%;"
-            />
+            >
+              <!---->
+            </div>
             
           </div>
           
+          
         </div>
       </div>
       
@@ -920,13 +1082,16 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             data-v-5431dabc=""
           >
             
+            
             <div
               class="t-skeleton__row"
             >
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -935,7 +1100,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -944,7 +1111,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -954,10 +1123,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-gradient"
                 style="width: 55%;"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             
+            
           </div>
         </div>
       </div>
@@ -979,13 +1151,16 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
             data-v-5431dabc=""
           >
             
+            
             <div
               class="t-skeleton__row"
             >
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -994,7 +1169,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -1003,7 +1180,9 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             <div
@@ -1013,10 +1192,13 @@ exports[`Skeleton > Skeleton mobileVue demo works fine 1`] = `
               <div
                 class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-flashed"
                 style="width: 55%;"
-              />
+              >
+                <!---->
+              </div>
               
             </div>
             
+            
           </div>
         </div>
       </div>
@@ -1050,6 +1232,7 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
         data-v-7e69da81=""
       >
         
+        
         <div
           class="t-skeleton__row"
         >
@@ -1057,10 +1240,13 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
           <div
             class="t-skeleton__col t-skeleton--type-circle t-skeleton--animation-none"
             style="width: 48px; height: 48px;"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         
+        
       </div>
     </div>
   </div>
@@ -1082,6 +1268,7 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
         data-v-7e69da81=""
       >
         
+        
         <div
           class="t-skeleton__row"
         >
@@ -1089,10 +1276,13 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
           <div
             class="t-skeleton__col t-skeleton--type-rect t-skeleton--animation-none"
             style="width: 72px; height: 72px;"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         
+        
       </div>
     </div>
   </div>
@@ -1114,6 +1304,7 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
         data-v-7e69da81=""
       >
         
+        
         <div
           class="t-skeleton__row"
         >
@@ -1121,11 +1312,15 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 24%; height: 16px; margin-right: 16px;"
-          />
+          >
+            <!---->
+          </div>
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 76%; height: 16px;"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -1134,10 +1329,13 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         
+        
       </div>
     </div>
   </div>
@@ -1159,13 +1357,16 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
         data-v-7e69da81=""
       >
         
+        
         <div
           class="t-skeleton__row"
         >
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -1174,7 +1375,9 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -1183,7 +1386,9 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
           
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         <div
@@ -1193,10 +1398,13 @@ exports[`Skeleton > Skeleton themeVue demo works fine 1`] = `
           <div
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"
             style="width: 55%;"
-          />
+          >
+            <!---->
+          </div>
           
         </div>
         
+        
       </div>
     </div>
   </div>
diff --git a/src/skeleton/__test__/index.test.jsx b/src/skeleton/__test__/index.test.jsx
index 5ede75d39..2c072911b 100644
--- a/src/skeleton/__test__/index.test.jsx
+++ b/src/skeleton/__test__/index.test.jsx
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
-import Skeleton from '../skeleton.vue';
+import Skeleton from '../skeleton';
 
 const prefix = 't';
 const name = `${prefix}-skeleton`;
diff --git a/src/skeleton/index.ts b/src/skeleton/index.ts
index dbf0690c7..0a50d9af6 100644
--- a/src/skeleton/index.ts
+++ b/src/skeleton/index.ts
@@ -1,4 +1,4 @@
-import Skeleton from './skeleton.vue';
+import Skeleton from './skeleton';
 import { withInstall, WithInstallType } from '../shared';
 
 import { TdSkeletonProps } from './type';
diff --git a/src/skeleton/skeleton.en-US.md b/src/skeleton/skeleton.en-US.md
index c2aeb4ad4..050f8957b 100644
--- a/src/skeleton/skeleton.en-US.md
+++ b/src/skeleton/skeleton.en-US.md
@@ -9,7 +9,7 @@ name | type | default | description | required
 animation | String | none | options: gradient/flashed/none | N
 delay | Number | 0 | \- | N
 loading | Boolean | true | \- | N
-rowCol | Array | - | Typescript：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string;  height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string;content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text'; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/skeleton/type.ts) | N
+rowCol | Array | - | Typescript：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text' }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/skeleton/type.ts) | N
 theme | String | text | options: avatar/image/text/paragraph | N
 
 ### CSS 变量
diff --git a/src/skeleton/skeleton.md b/src/skeleton/skeleton.md
index 2d9babfa3..483c0903d 100644
--- a/src/skeleton/skeleton.md
+++ b/src/skeleton/skeleton.md
@@ -9,7 +9,7 @@
 animation | String | none | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为 'none' 则表示没有动画。可选项：gradient/flashed/none | N
 delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
 loading | Boolean | true | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N
-rowCol | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string;  height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string;content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text'; }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/skeleton/type.ts) | N
+rowCol | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array<Number \| SkeletonRowColObj \| Array<SkeletonRowColObj>>` `interface SkeletonRowColObj { width?: string; height?: string; size?: string; marginRight?: string; marginLeft?: string; margin?: string; content?: string \| TNode; type?: 'rect' \| 'circle' \| 'text' }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/skeleton/type.ts) | N
 theme | String | text | 骨架图风格，有基础、头像组合等两大类。可选项：avatar/image/text/paragraph | N
 
 ### CSS 变量
diff --git a/src/skeleton/skeleton.tsx b/src/skeleton/skeleton.tsx
new file mode 100644
index 000000000..44799b220
--- /dev/null
+++ b/src/skeleton/skeleton.tsx
@@ -0,0 +1,138 @@
+import { h, defineComponent, watch, ref } from 'vue';
+import isNumber from 'lodash/isNumber';
+import isArray from 'lodash/isArray';
+import isFunction from 'lodash/isFunction';
+import { useContent } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
+import config from '../config';
+import SkeletonProps from './props';
+import { SkeletonRowCol, SkeletonRowColObj, TdSkeletonProps } from './type';
+import { ClassName, Styles } from '../common';
+
+const { prefix } = config;
+const name = `${prefix}-skeleton`;
+const ThemeMap: Record<TdSkeletonProps['theme'], SkeletonRowCol> = {
+  avatar: [{ type: 'circle', size: '48px' }],
+  image: [{ type: 'rect', size: '72px' }],
+  text: [
+    [
+      { width: '24%', height: '16px', marginRight: '16px' },
+      { width: '76%', height: '16px' },
+    ],
+    1,
+  ],
+  paragraph: [1, 1, 1, { width: '55%' }],
+};
+
+const getColItemStyle = (obj: SkeletonRowColObj): Styles => {
+  const styleName = [
+    'width',
+    'height',
+    'marginRight',
+    'marginLeft',
+    'margin',
+    'size',
+    'background',
+    'backgroundColor',
+    'borderRadius',
+  ];
+  const style: Styles = {};
+  styleName.forEach((name) => {
+    if (name in obj) {
+      const px = isNumber(obj[name]) ? `${obj[name]}px` : obj[name];
+      if (name === 'size') {
+        [style.width, style.height] = [px, px];
+      } else {
+        style[name] = px;
+      }
+    }
+  });
+  return style;
+};
+
+export default defineComponent({
+  name,
+  props: SkeletonProps,
+  setup(props, { slots }) {
+    const isShow = ref(false);
+    const renderContent = useContent();
+
+    const componentName = usePrefixClass('skeleton');
+
+    const getColItemClass = (obj: SkeletonRowColObj): ClassName => [
+      `${componentName.value}__col`,
+      `${componentName.value}--type-${obj.type || 'text'}`,
+      { [`${componentName.value}--animation-${props.animation}`]: props.animation },
+    ];
+
+    const renderCols = (_cols: Number | SkeletonRowColObj | Array<SkeletonRowColObj>) => {
+      let cols: Array<SkeletonRowColObj> = [];
+      if (isArray(_cols)) {
+        cols = _cols;
+      } else if (isNumber(_cols)) {
+        cols = new Array(_cols).fill({ type: 'text' });
+      } else {
+        cols = [_cols as SkeletonRowColObj];
+      }
+
+      return cols.map((obj) => (
+        <div class={getColItemClass(obj)} style={getColItemStyle(obj)}>
+          {isFunction(obj.content) ? obj.content(h) : obj.content}
+        </div>
+      ));
+    };
+
+    const renderRowCol = (_rowCol?: SkeletonRowCol) => {
+      const rowCol: SkeletonRowCol = _rowCol || props.rowCol;
+
+      return rowCol.map((item) => <div class={`${name}__row`}>{renderCols(item)}</div>);
+    };
+
+    watch(
+      () => props.loading,
+      (val) => {
+        if (!val || props.delay === 0) {
+          isShow.value = val;
+          return;
+        }
+        setTimeout(() => {
+          isShow.value = val;
+        }, props.delay);
+      },
+      { immediate: true },
+    );
+
+    return () => {
+      const content = renderContent('default', 'content');
+      if (slots.default) {
+        return <div>{content}</div>;
+      }
+
+      if (!isShow.value) {
+        return;
+      }
+
+      const children = [];
+
+      // 保持优先级： rowCol > theme，增加默认值兜底
+      if (props.rowCol) {
+        children.push(renderRowCol(props.rowCol));
+      } else if (props.theme) {
+        children.push(renderRowCol(ThemeMap[props.theme]));
+      } else if (!props.theme && !props.rowCol) {
+        // 什么都不传时，传入默认 rowCol
+        children.push(
+          renderRowCol([
+            [
+              { width: '24%', height: '16px', marginRight: '16px' },
+              { width: '76%', height: '16px' },
+            ],
+            1,
+          ]),
+        );
+      }
+
+      return <div class={componentName.value}>{children}</div>;
+    };
+  },
+});
diff --git a/src/skeleton/skeleton.vue b/src/skeleton/skeleton.vue
deleted file mode 100644
index 1f7313e13..000000000
--- a/src/skeleton/skeleton.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-  <div v-if="loading" :class="`${name}`">
-    <template v-if="parsedRowcols.length">
-      <div v-for="(row, index) of parsedRowcols" :key="`row-${index}`" :class="`${name}__row`">
-        <div v-for="(col, idx) of row" :key="`col-${idx}`" :class="col.class" :style="col.style"></div>
-      </div>
-    </template>
-  </div>
-  <slot v-else />
-</template>
-
-<script lang="ts">
-import { defineComponent, computed, toRefs, watchEffect, ref } from 'vue';
-import isNumber from 'lodash/isNumber';
-import config from '../config';
-import SkeletonProps from './props';
-import { SkeletonRowColObj } from './type';
-import { ClassName, Styles } from '../common';
-
-const { prefix } = config;
-const name = `${prefix}-skeleton`;
-const ThemeMap = {
-  avatar: [{ type: 'circle', size: '48px' }],
-  image: [{ type: 'rect', size: '72px' }],
-  text: [
-    [
-      { width: '24%', height: '16px', marginRight: '16px' },
-      { width: '76%', height: '16px' },
-    ],
-    1,
-  ],
-  paragraph: [1, 1, 1, { width: '55%' }],
-};
-
-export default defineComponent({
-  name,
-  props: SkeletonProps,
-  setup(props) {
-    const { animation } = toRefs(props);
-    const rowCols = ref<any>([]);
-
-    watchEffect(() => {
-      if (props.rowCol?.length) {
-        rowCols.value = [...props.rowCol];
-      } else {
-        rowCols.value = [...ThemeMap[props.theme || 'text']];
-      }
-    });
-
-    const getColItemClass = (obj: SkeletonRowColObj): ClassName => [
-      `${name}__col`,
-      `${name}--type-${obj.type || 'text'}`,
-      `${name}--animation-${animation.value}`,
-    ];
-
-    const getColItemStyle = (obj: SkeletonRowColObj): Styles => {
-      const styleName = [
-        'width',
-        'height',
-        'marginRight',
-        'marginLeft',
-        'margin',
-        'size',
-        'background',
-        'backgroundColor',
-        'borderRadius',
-      ];
-      const style: Styles = {};
-      styleName.forEach((name) => {
-        if (name in obj) {
-          const px = isNumber(obj[name]) ? `${obj[name]}px` : obj[name];
-          if (name === 'size') {
-            [style.width, style.height] = [px, px];
-          } else {
-            style[name] = px;
-          }
-        }
-      });
-      return style;
-    };
-
-    const parsedRowcols = computed(() => {
-      return rowCols.value.map((item: any) => {
-        if (isNumber(item)) {
-          return [
-            {
-              class: getColItemClass({ type: 'text' }),
-              style: {},
-            },
-          ];
-        }
-        if (Array.isArray(item)) {
-          return item.map((col) => {
-            return {
-              ...col,
-              class: getColItemClass(col),
-              style: getColItemStyle(col),
-            };
-          });
-        }
-
-        const nItem = item as SkeletonRowColObj;
-        return [
-          {
-            ...nItem,
-            class: getColItemClass(nItem),
-            style: getColItemStyle(nItem),
-          },
-        ];
-      });
-    });
-
-    return {
-      name,
-      parsedRowcols,
-    };
-  },
-});
-</script>