From a2d98c9d2c706f4c946f5f80b5a19ffcfaac4ac2 Mon Sep 17 00:00:00 2001
From: Zhang Yiyao <1379255913@qq.com>
Date: Thu, 30 May 2024 19:11:37 +0800
Subject: [PATCH] refactor(rate): sfc to tsx (#1417)

* refactor(rate): sfc to tsx

re #1407

* fix: update snaps

* refactor(rate): change content to context

* refactor(rate): delete useless log
---
 .../__test__/__snapshots__/demo.test.jsx.snap |  24 +-
 .../__test__/__snapshots__/demo.test.jsx.snap |  27 +-
 .../__test__/__snapshots__/demo.test.jsx.snap | 314 ++++++++----------
 src/rate/__test__/index.test.jsx              |   2 +-
 src/rate/index.ts                             |   2 +-
 src/rate/{rate.vue => rate.tsx}               | 245 +++++++-------
 6 files changed, 282 insertions(+), 332 deletions(-)
 rename src/rate/{rate.vue => rate.tsx} (53%)

diff --git a/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
index 43b711c4c..8ccd97aec 100644
--- a/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
@@ -461,9 +461,9 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
             
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -479,9 +479,9 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -497,9 +497,9 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -515,9 +515,9 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -533,9 +533,9 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -556,7 +556,7 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
           >
             No score
           </span>
-          <!--v-if-->
+          <!---->
         </div>
       </div>
       <div
@@ -3610,9 +3610,9 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
         
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3628,9 +3628,9 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3646,9 +3646,9 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3664,9 +3664,9 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3682,9 +3682,9 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3705,7 +3705,7 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
       >
         No score
       </span>
-      <!--v-if-->
+      <!---->
     </div>
   </div>
   <div
diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap
index 874a8d281..0cd67b2a1 100644
--- a/src/form/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/form/__test__/__snapshots__/demo.test.jsx.snap
@@ -1091,7 +1091,6 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
               
               <div
                 class="t-rate__icon t-rate__icon--selected"
-                size="24px"
                 style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
               >
                 <div
@@ -1125,7 +1124,6 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
               </div>
               <div
                 class="t-rate__icon t-rate__icon--selected"
-                size="24px"
                 style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
               >
                 <div
@@ -1159,7 +1157,6 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
               </div>
               <div
                 class="t-rate__icon t-rate__icon--unselected"
-                size="24px"
                 style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
               >
                 <div
@@ -1193,7 +1190,6 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
               </div>
               <div
                 class="t-rate__icon t-rate__icon--unselected"
-                size="24px"
                 style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
               >
                 <div
@@ -1227,7 +1223,6 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
               </div>
               <div
                 class="t-rate__icon t-rate__icon--unselected"
-                size="24px"
                 style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
               >
                 <div
@@ -1261,8 +1256,8 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
               </div>
               
             </div>
-            <!--v-if-->
-            <!--v-if-->
+            <!---->
+            <!---->
           </div>
           
         </div>
@@ -2781,7 +2776,6 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                     
                     <div
                       class="t-rate__icon t-rate__icon--selected"
-                      size="24px"
                       style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
                     >
                       <div
@@ -2815,7 +2809,6 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                     </div>
                     <div
                       class="t-rate__icon t-rate__icon--selected"
-                      size="24px"
                       style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
                     >
                       <div
@@ -2849,7 +2842,6 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                     </div>
                     <div
                       class="t-rate__icon t-rate__icon--unselected"
-                      size="24px"
                       style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
                     >
                       <div
@@ -2883,7 +2875,6 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                     </div>
                     <div
                       class="t-rate__icon t-rate__icon--unselected"
-                      size="24px"
                       style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
                     >
                       <div
@@ -2917,7 +2908,6 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                     </div>
                     <div
                       class="t-rate__icon t-rate__icon--unselected"
-                      size="24px"
                       style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
                     >
                       <div
@@ -2951,8 +2941,8 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
-                  <!--v-if-->
+                  <!---->
+                  <!---->
                 </div>
                 
               </div>
@@ -4328,7 +4318,6 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
               
               <div
                 class="t-rate__icon t-rate__icon--selected"
-                size="24px"
                 style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
               >
                 <div
@@ -4362,7 +4351,6 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
               </div>
               <div
                 class="t-rate__icon t-rate__icon--selected"
-                size="24px"
                 style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
               >
                 <div
@@ -4396,7 +4384,6 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
               </div>
               <div
                 class="t-rate__icon t-rate__icon--unselected"
-                size="24px"
                 style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
               >
                 <div
@@ -4430,7 +4417,6 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
               </div>
               <div
                 class="t-rate__icon t-rate__icon--unselected"
-                size="24px"
                 style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
               >
                 <div
@@ -4464,7 +4450,6 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
               </div>
               <div
                 class="t-rate__icon t-rate__icon--unselected"
-                size="24px"
                 style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
               >
                 <div
@@ -4498,8 +4483,8 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
               </div>
               
             </div>
-            <!--v-if-->
-            <!--v-if-->
+            <!---->
+            <!---->
           </div>
           
         </div>
diff --git a/src/rate/__test__/__snapshots__/demo.test.jsx.snap b/src/rate/__test__/__snapshots__/demo.test.jsx.snap
index 9c852b77f..1fa63aa65 100644
--- a/src/rate/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/rate/__test__/__snapshots__/demo.test.jsx.snap
@@ -31,9 +31,9 @@ exports[`Rate > Rate actionVue demo works fine 1`] = `
         
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -49,9 +49,9 @@ exports[`Rate > Rate actionVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -67,9 +67,9 @@ exports[`Rate > Rate actionVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -85,9 +85,9 @@ exports[`Rate > Rate actionVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -103,9 +103,9 @@ exports[`Rate > Rate actionVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -121,8 +121,8 @@ exports[`Rate > Rate actionVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--v-if-->
-      <!--v-if-->
+      <!---->
+      <!---->
     </div>
   </div>
   <p
@@ -151,7 +151,6 @@ exports[`Rate > Rate actionVue demo works fine 1`] = `
         
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
           <div
@@ -185,7 +184,6 @@ exports[`Rate > Rate actionVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
           <div
@@ -219,7 +217,6 @@ exports[`Rate > Rate actionVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
           <div
@@ -253,7 +250,6 @@ exports[`Rate > Rate actionVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
           <div
@@ -287,7 +283,6 @@ exports[`Rate > Rate actionVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
         >
           <div
@@ -321,8 +316,8 @@ exports[`Rate > Rate actionVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--v-if-->
-      <!--v-if-->
+      <!---->
+      <!---->
     </div>
   </div>
   
@@ -350,9 +345,9 @@ exports[`Rate > Rate baseVue demo works fine 1`] = `
       
       <div
         class="t-rate__icon t-rate__icon--selected"
-        size="24px"
         style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-star-filled"
           fill="none"
@@ -368,9 +363,9 @@ exports[`Rate > Rate baseVue demo works fine 1`] = `
       </div>
       <div
         class="t-rate__icon t-rate__icon--selected"
-        size="24px"
         style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-star-filled"
           fill="none"
@@ -386,9 +381,9 @@ exports[`Rate > Rate baseVue demo works fine 1`] = `
       </div>
       <div
         class="t-rate__icon t-rate__icon--selected"
-        size="24px"
         style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-star-filled"
           fill="none"
@@ -404,9 +399,9 @@ exports[`Rate > Rate baseVue demo works fine 1`] = `
       </div>
       <div
         class="t-rate__icon t-rate__icon--unselected"
-        size="24px"
         style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-star-filled"
           fill="none"
@@ -422,9 +417,9 @@ exports[`Rate > Rate baseVue demo works fine 1`] = `
       </div>
       <div
         class="t-rate__icon t-rate__icon--unselected"
-        size="24px"
         style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-star-filled"
           fill="none"
@@ -440,8 +435,8 @@ exports[`Rate > Rate baseVue demo works fine 1`] = `
       </div>
       
     </div>
-    <!--v-if-->
-    <!--v-if-->
+    <!---->
+    <!---->
   </div>
 </div>
 `;
@@ -471,7 +466,6 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
         
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #FFC51C; --td-rate-unselected-color: #E8E8E8;"
         >
           <div
@@ -505,7 +499,6 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #FFC51C; --td-rate-unselected-color: #E8E8E8;"
         >
           <div
@@ -539,7 +532,6 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #FFC51C; --td-rate-unselected-color: #E8E8E8;"
         >
           <div
@@ -573,7 +565,6 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #FFC51C; --td-rate-unselected-color: #E8E8E8;"
         >
           <div
@@ -607,7 +598,6 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #FFC51C; --td-rate-unselected-color: #E8E8E8;"
         >
           <div
@@ -641,8 +631,8 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--v-if-->
-      <!--v-if-->
+      <!---->
+      <!---->
     </div>
   </div>
   <div
@@ -665,7 +655,6 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
         
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #00A870;"
         >
           <div
@@ -699,7 +688,6 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #00A870;"
         >
           <div
@@ -733,7 +721,6 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #00A870;"
         >
           <div
@@ -767,7 +754,6 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #00A870;"
         >
           <div
@@ -801,7 +787,6 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #00A870;"
         >
           <div
@@ -835,8 +820,8 @@ exports[`Rate > Rate colorVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--v-if-->
-      <!--v-if-->
+      <!---->
+      <!---->
     </div>
   </div>
   
@@ -864,9 +849,9 @@ exports[`Rate > Rate countVue demo works fine 1`] = `
       
       <div
         class="t-rate__icon t-rate__icon--selected"
-        size="24px"
         style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-star-filled"
           fill="none"
@@ -882,9 +867,9 @@ exports[`Rate > Rate countVue demo works fine 1`] = `
       </div>
       <div
         class="t-rate__icon t-rate__icon--selected"
-        size="24px"
         style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-star-filled"
           fill="none"
@@ -900,9 +885,9 @@ exports[`Rate > Rate countVue demo works fine 1`] = `
       </div>
       <div
         class="t-rate__icon t-rate__icon--unselected"
-        size="24px"
         style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-star-filled"
           fill="none"
@@ -918,8 +903,8 @@ exports[`Rate > Rate countVue demo works fine 1`] = `
       </div>
       
     </div>
-    <!--v-if-->
-    <!--v-if-->
+    <!---->
+    <!---->
   </div>
 </div>
 `;
@@ -945,9 +930,9 @@ exports[`Rate > Rate customVue demo works fine 1`] = `
       
       <div
         class="t-rate__icon t-rate__icon--selected"
-        size="24px"
         style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-thumb-up"
           fill="none"
@@ -963,9 +948,9 @@ exports[`Rate > Rate customVue demo works fine 1`] = `
       </div>
       <div
         class="t-rate__icon t-rate__icon--selected"
-        size="24px"
         style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-thumb-up"
           fill="none"
@@ -981,9 +966,9 @@ exports[`Rate > Rate customVue demo works fine 1`] = `
       </div>
       <div
         class="t-rate__icon t-rate__icon--selected"
-        size="24px"
         style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-thumb-up"
           fill="none"
@@ -999,9 +984,9 @@ exports[`Rate > Rate customVue demo works fine 1`] = `
       </div>
       <div
         class="t-rate__icon t-rate__icon--unselected"
-        size="24px"
         style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-thumb-up"
           fill="none"
@@ -1017,9 +1002,9 @@ exports[`Rate > Rate customVue demo works fine 1`] = `
       </div>
       <div
         class="t-rate__icon t-rate__icon--unselected"
-        size="24px"
         style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-thumb-up"
           fill="none"
@@ -1035,8 +1020,8 @@ exports[`Rate > Rate customVue demo works fine 1`] = `
       </div>
       
     </div>
-    <!--v-if-->
-    <!--v-if-->
+    <!---->
+    <!---->
   </div>
 </div>
 `;
@@ -1096,9 +1081,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1114,9 +1099,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1132,9 +1117,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1150,9 +1135,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1168,9 +1153,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1186,8 +1171,8 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
-          <!--v-if-->
+          <!---->
+          <!---->
         </div>
       </div>
       
@@ -1230,9 +1215,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-thumb-up"
                 fill="none"
@@ -1248,9 +1233,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-thumb-up"
                 fill="none"
@@ -1266,9 +1251,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-thumb-up"
                 fill="none"
@@ -1284,9 +1269,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-thumb-up"
                 fill="none"
@@ -1302,9 +1287,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-thumb-up"
                 fill="none"
@@ -1320,8 +1305,8 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
-          <!--v-if-->
+          <!---->
+          <!---->
         </div>
       </div>
       
@@ -1364,9 +1349,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1382,9 +1367,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1400,9 +1385,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1418,8 +1403,8 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
-          <!--v-if-->
+          <!---->
+          <!---->
         </div>
       </div>
       
@@ -1463,9 +1448,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1481,9 +1466,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1499,9 +1484,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1517,9 +1502,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1535,9 +1520,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1558,7 +1543,7 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
           >
             一般
           </span>
-          <!--v-if-->
+          <!---->
         </div>
       </div>
       <div
@@ -1581,9 +1566,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1599,9 +1584,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1617,9 +1602,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1635,9 +1620,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1653,9 +1638,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1676,7 +1661,7 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
           >
             5 分
           </span>
-          <!--v-if-->
+          <!---->
         </div>
       </div>
       <div
@@ -1699,9 +1684,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1717,9 +1702,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1735,9 +1720,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1753,9 +1738,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1771,9 +1756,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1794,7 +1779,7 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
           >
             未评分
           </span>
-          <!--v-if-->
+          <!---->
         </div>
       </div>
       
@@ -1845,9 +1830,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1863,9 +1848,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1881,9 +1866,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1899,9 +1884,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1917,9 +1902,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -1935,8 +1920,8 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
-          <!--v-if-->
+          <!---->
+          <!---->
         </div>
       </div>
       <p
@@ -1965,7 +1950,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
               <div
@@ -1999,7 +1983,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
               <div
@@ -2033,7 +2016,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
               <div
@@ -2067,7 +2049,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
               <div
@@ -2101,7 +2082,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
             >
               <div
@@ -2135,8 +2115,8 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
-          <!--v-if-->
+          <!---->
+          <!---->
         </div>
       </div>
       
@@ -2185,9 +2165,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -2203,9 +2183,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -2221,9 +2201,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -2239,9 +2219,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -2257,9 +2237,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -2275,8 +2255,8 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
-          <!--v-if-->
+          <!---->
+          <!---->
         </div>
       </div>
       <div
@@ -2299,9 +2279,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="20"
               style="font-size: 20px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -2317,9 +2297,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="20"
               style="font-size: 20px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -2335,9 +2315,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="20"
               style="font-size: 20px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -2353,9 +2333,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="20"
               style="font-size: 20px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -2371,9 +2351,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="20"
               style="font-size: 20px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -2389,8 +2369,8 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
-          <!--v-if-->
+          <!---->
+          <!---->
         </div>
       </div>
       
@@ -2435,7 +2415,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #FFC51C; --td-rate-unselected-color: #E8E8E8;"
             >
               <div
@@ -2469,7 +2448,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #FFC51C; --td-rate-unselected-color: #E8E8E8;"
             >
               <div
@@ -2503,7 +2481,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #FFC51C; --td-rate-unselected-color: #E8E8E8;"
             >
               <div
@@ -2537,7 +2514,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #FFC51C; --td-rate-unselected-color: #E8E8E8;"
             >
               <div
@@ -2571,7 +2547,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #FFC51C; --td-rate-unselected-color: #E8E8E8;"
             >
               <div
@@ -2605,8 +2580,8 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
-          <!--v-if-->
+          <!---->
+          <!---->
         </div>
       </div>
       <div
@@ -2629,7 +2604,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #00A870;"
             >
               <div
@@ -2663,7 +2637,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #00A870;"
             >
               <div
@@ -2697,7 +2670,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #00A870;"
             >
               <div
@@ -2731,7 +2703,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #00A870;"
             >
               <div
@@ -2765,7 +2736,6 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="24px"
               style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #00A870;"
             >
               <div
@@ -2799,8 +2769,8 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
-          <!--v-if-->
+          <!---->
+          <!---->
         </div>
       </div>
       
@@ -2842,9 +2812,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="30"
               style="font-size: 30px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -2860,9 +2830,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="30"
               style="font-size: 30px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -2878,9 +2848,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="30"
               style="font-size: 30px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -2896,9 +2866,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--selected"
-              size="30"
               style="font-size: 30px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -2914,9 +2884,9 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             <div
               class="t-rate__icon t-rate__icon--unselected"
-              size="30"
               style="font-size: 30px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
             >
+              <!---->
               <svg
                 class="t-icon t-icon-star-filled"
                 fill="none"
@@ -2932,8 +2902,8 @@ exports[`Rate > Rate mobileVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
-          <!--v-if-->
+          <!---->
+          <!---->
         </div>
         <div
           class="desc desc--{{value > 3 ? 'active' : ''}}"
@@ -2973,9 +2943,9 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
         
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -2991,9 +2961,9 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3009,9 +2979,9 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3027,9 +2997,9 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3045,9 +3015,9 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3068,7 +3038,7 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
       >
         一般
       </span>
-      <!--v-if-->
+      <!---->
     </div>
   </div>
   <div
@@ -3091,9 +3061,9 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
         
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3109,9 +3079,9 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3127,9 +3097,9 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3145,9 +3115,9 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3163,9 +3133,9 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3186,7 +3156,7 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
       >
         5 分
       </span>
-      <!--v-if-->
+      <!---->
     </div>
   </div>
   <div
@@ -3209,9 +3179,9 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
         
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3227,9 +3197,9 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3245,9 +3215,9 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3263,9 +3233,9 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3281,9 +3251,9 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3304,7 +3274,7 @@ exports[`Rate > Rate showTextVue demo works fine 1`] = `
       >
         未评分
       </span>
-      <!--v-if-->
+      <!---->
     </div>
   </div>
   
@@ -3336,9 +3306,9 @@ exports[`Rate > Rate sizeVue demo works fine 1`] = `
         
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3354,9 +3324,9 @@ exports[`Rate > Rate sizeVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3372,9 +3342,9 @@ exports[`Rate > Rate sizeVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3390,9 +3360,9 @@ exports[`Rate > Rate sizeVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3408,9 +3378,9 @@ exports[`Rate > Rate sizeVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="24px"
           style="font-size: 24px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3426,8 +3396,8 @@ exports[`Rate > Rate sizeVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--v-if-->
-      <!--v-if-->
+      <!---->
+      <!---->
     </div>
   </div>
   <div
@@ -3450,9 +3420,9 @@ exports[`Rate > Rate sizeVue demo works fine 1`] = `
         
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="20"
           style="font-size: 20px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3468,9 +3438,9 @@ exports[`Rate > Rate sizeVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="20"
           style="font-size: 20px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3486,9 +3456,9 @@ exports[`Rate > Rate sizeVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--selected"
-          size="20"
           style="font-size: 20px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3504,9 +3474,9 @@ exports[`Rate > Rate sizeVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="20"
           style="font-size: 20px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3522,9 +3492,9 @@ exports[`Rate > Rate sizeVue demo works fine 1`] = `
         </div>
         <div
           class="t-rate__icon t-rate__icon--unselected"
-          size="20"
           style="font-size: 20px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
         >
+          <!---->
           <svg
             class="t-icon t-icon-star-filled"
             fill="none"
@@ -3540,8 +3510,8 @@ exports[`Rate > Rate sizeVue demo works fine 1`] = `
         </div>
         
       </div>
-      <!--v-if-->
-      <!--v-if-->
+      <!---->
+      <!---->
     </div>
   </div>
   
@@ -3563,9 +3533,9 @@ exports[`Rate > Rate specialVue demo works fine 1`] = `
       
       <div
         class="t-rate__icon t-rate__icon--selected"
-        size="30"
         style="font-size: 30px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-star-filled"
           fill="none"
@@ -3581,9 +3551,9 @@ exports[`Rate > Rate specialVue demo works fine 1`] = `
       </div>
       <div
         class="t-rate__icon t-rate__icon--selected"
-        size="30"
         style="font-size: 30px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-star-filled"
           fill="none"
@@ -3599,9 +3569,9 @@ exports[`Rate > Rate specialVue demo works fine 1`] = `
       </div>
       <div
         class="t-rate__icon t-rate__icon--selected"
-        size="30"
         style="font-size: 30px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-star-filled"
           fill="none"
@@ -3617,9 +3587,9 @@ exports[`Rate > Rate specialVue demo works fine 1`] = `
       </div>
       <div
         class="t-rate__icon t-rate__icon--selected"
-        size="30"
         style="font-size: 30px; margin-right: 8px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-star-filled"
           fill="none"
@@ -3635,9 +3605,9 @@ exports[`Rate > Rate specialVue demo works fine 1`] = `
       </div>
       <div
         class="t-rate__icon t-rate__icon--unselected"
-        size="30"
         style="font-size: 30px; margin-right: 0px; --td-rate-selected-color: #ED7B2F;"
       >
+        <!---->
         <svg
           class="t-icon t-icon-star-filled"
           fill="none"
@@ -3653,8 +3623,8 @@ exports[`Rate > Rate specialVue demo works fine 1`] = `
       </div>
       
     </div>
-    <!--v-if-->
-    <!--v-if-->
+    <!---->
+    <!---->
   </div>
   <div
     class="desc desc--{{value > 3 ? 'active' : ''}}"
diff --git a/src/rate/__test__/index.test.jsx b/src/rate/__test__/index.test.jsx
index 8d76d9f69..3a1de9e0e 100644
--- a/src/rate/__test__/index.test.jsx
+++ b/src/rate/__test__/index.test.jsx
@@ -2,7 +2,7 @@ import { ref, nextTick, markRaw } from 'vue';
 import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
 import { ThumbUpIcon, ThumbDownIcon, StarFilledIcon } from 'tdesign-icons-vue-next';
-import Rate from '../rate.vue';
+import Rate from '../rate';
 import { trigger } from '../../image-viewer/__test__/touch';
 
 const move = async (target) => {
diff --git a/src/rate/index.ts b/src/rate/index.ts
index 9159af0de..3b8458d62 100644
--- a/src/rate/index.ts
+++ b/src/rate/index.ts
@@ -1,4 +1,4 @@
-import Rate from './rate.vue';
+import Rate from './rate';
 import { withInstall, WithInstallType } from '../shared';
 import { TdRateProps } from './type';
 
diff --git a/src/rate/rate.vue b/src/rate/rate.tsx
similarity index 53%
rename from src/rate/rate.vue
rename to src/rate/rate.tsx
index 55c63236b..23a5c74e0 100644
--- a/src/rate/rate.vue
+++ b/src/rate/rate.tsx
@@ -1,82 +1,4 @@
-<template>
-  <div :class="rootClasses">
-    <div
-      ref="rateWrapper"
-      :class="`${name}__wrapper`"
-      @touchstart="onTouchstart"
-      @touchmove="onTouchmove"
-      @touchend="onTouchEnd"
-      @touchcancel="onTouchEnd"
-    >
-      <component
-        :is="iconComponent(n, actualVal)"
-        v-for="n in count"
-        :key="n"
-        :class="classes(n)"
-        :size="size"
-        :style="{ marginRight: `${count > n ? gap : 0}px`, ...colors }"
-        @click="onClick"
-      />
-    </div>
-
-    <span v-if="showText" :class="{ [`${name}__text`]: true, [`${name}__text--active`]: actualVal > 0 }">
-      {{ rateText }}
-    </span>
-
-    <div v-if="tipsVisible" ref="ratePopoverRef" :class="`${name}__tips`" :style="{ left: `${tipsLeft}px` }">
-      <div v-if="actionType === 'tap'" style="display: flex">
-        <div
-          v-if="allowHalf"
-          :class="{
-            [`${name}__tips-item`]: true,
-            [`${name}__tips-item--active`]: actualVal === Math.ceil(popoverValue) - 0.5,
-          }"
-          @click="() => onSelect(Math.ceil(popoverValue) - 0.5)"
-        >
-          <component
-            :is="iconComponent(Math.ceil(popoverValue), Math.ceil(popoverValue) - 0.5)"
-            :style="{ ...colors }"
-            :size="size"
-            :class="`${name}__icon ${name}__icon--unselected`"
-          />
-          <span :class="`${name}__tips-text`">{{ Math.ceil(popoverValue) - 0.5 }}</span>
-        </div>
-        <div
-          :class="{
-            [`${name}__tips-item`]: true,
-            [`${name}__tips-item--active`]: allowHalf && actualVal === Math.ceil(popoverValue),
-          }"
-          @click="() => onSelect(Math.ceil(popoverValue))"
-        >
-          <component
-            :is="iconComponent(Math.ceil(popoverValue), Math.ceil(popoverValue))"
-            :style="{ ...colors }"
-            :size="size"
-            :class="`${name}__icon ${name}__icon--selected`"
-          />
-          <span :class="`${name}__tips-text`">{{ Math.ceil(popoverValue) }}</span>
-        </div>
-      </div>
-
-      <div v-else :class="`${name}__tips-item`" @click="() => onSelect(popoverValue)">
-        <component
-          :is="iconComponent(Math.ceil(popoverValue), popoverValue)"
-          :style="{ ...colors }"
-          :size="size"
-          :class="{
-            [`${name}__icon`]: true,
-            [`${name}__icon--selected`]: Math.ceil(popoverValue) === popoverValue,
-            [`${name}__icon--unselected`]: Math.ceil(popoverValue) !== popoverValue,
-          }"
-        />
-        <span :class="`${name}__tips-text`">{{ popoverValue }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { ref, computed, defineComponent, h } from 'vue';
+import { computed, defineComponent, ref, h } from 'vue';
 import { StarFilledIcon } from 'tdesign-icons-vue-next';
 import { onClickOutside } from '@vueuse/core';
 import rateProps from './props';
@@ -85,6 +7,7 @@ import { TdRateProps } from './type';
 import { useDefault } from '../shared';
 import { useFormDisabled } from '../form/hooks';
 import { useConfig } from '../config-provider/useConfig';
+import { usePrefixClass } from '../hooks/useClass';
 
 const { prefix } = config;
 const name = `${prefix}-rate`;
@@ -92,8 +15,8 @@ const name = `${prefix}-rate`;
 export default defineComponent({
   name,
   props: rateProps,
-  emits: ['change', 'update:value', 'update:modelValue'],
   setup(props, context) {
+    const rateClass = usePrefixClass('rate');
     const { t, globalConfig } = useConfig('rate');
     const disabled = useFormDisabled();
 
@@ -159,31 +82,10 @@ export default defineComponent({
       return unSelect || startComponent;
     };
 
-    const iconComponent = (n: number, value: number) => {
-      const { allowHalf, size } = props;
-      const classPrefix = `${name}__icon-left`;
-      const select = value >= n;
-      const selectHalf = Math.ceil(value) >= n;
-      return h(
-        'div',
-        { style: { fontSize: regSize(size) } },
-        allowHalf
-          ? [
-              h(
-                'div',
-                { class: `${classPrefix} ${selectHalf ? `${classPrefix}--selected` : `${classPrefix}--unselected`}` },
-                h(icon(selectHalf)),
-              ),
-              h(icon(select)),
-            ]
-          : h(icon(select)),
-      );
-    };
-
-    const rootClasses = computed(() => [`${name}`, { [`${name}--disabled`]: disabled.value }]);
+    const rootClasses = computed(() => [`${rateClass.value}`, { [`${rateClass.value}--disabled`]: disabled.value }]);
 
     const classes = (n: number) => {
-      const classPrefix = `${name}__icon`;
+      const classPrefix = `${rateClass.value}__icon`;
 
       return {
         [classPrefix]: true,
@@ -294,28 +196,121 @@ export default defineComponent({
       hideTips();
     };
 
-    return {
-      name: ref(name),
-      rootClasses,
-      classes,
-      rateWrapper,
-      actualVal,
-      regSize,
-      unitConvert,
-      colors,
-      rateText,
-      onClick,
-      onTouchstart,
-      onTouchmove,
-      onTouchEnd,
-      tipsVisible,
-      tipsLeft,
-      actionType,
-      onSelect,
-      popoverValue,
-      ratePopoverRef,
-      iconComponent,
+    return () => {
+      const iconComponent = (n: number, value: number) => {
+        const classPrefix = `${rateClass.value}__icon-left`;
+        const select = value >= n;
+        const selectHalf = Math.ceil(value) >= n;
+        const SelectIcon = icon(select);
+        const SelectHalfIcon = icon(selectHalf);
+        return (
+          <div style={{ fontSize: regSize(props.size) }}>
+            {props.allowHalf ? (
+              <div class={`${classPrefix} ${selectHalf ? `${classPrefix}--selected` : `${classPrefix}--unselected`}`}>
+                {<SelectHalfIcon />}
+              </div>
+            ) : null}
+            {<SelectIcon />}
+          </div>
+        );
+      };
+
+      const renderRateWrapper = () => {
+        const countList = Array.from(Array(props.count), (_, k) => k + 1);
+        return (
+          <div
+            ref={rateWrapper}
+            class={`${rateClass.value}__wrapper`}
+            onTouchstart={onTouchstart}
+            onTouchmove={onTouchmove}
+            onTouchend={onTouchEnd}
+            onTouchcancel={onTouchEnd}
+          >
+            {countList.map((n) => {
+              // 这里没有好的代替component组件的方法，用h函数代替
+              return h(iconComponent(n, actualVal.value), {
+                key: n,
+                class: classes(n),
+                style: { marginRight: `${props.count > n ? props.gap : 0}px`, ...colors.value },
+                onClick,
+              });
+            })}
+          </div>
+        );
+      };
+
+      const renderRateText = () => {
+        if (!props.showText) return null;
+        return (
+          <span
+            class={{ [`${rateClass.value}__text`]: true, [`${rateClass.value}__text--active`]: actualVal.value > 0 }}
+          >
+            {rateText.value}
+          </span>
+        );
+      };
+
+      const renderRateTips = () => {
+        if (!tipsVisible.value) return null;
+        return (
+          <div ref={ratePopoverRef} class={`${rateClass.value}__tips`} style={{ left: `${tipsLeft.value}px` }}>
+            {actionType.value === 'tap' ? (
+              <div style="display: flex">
+                {props.allowHalf && (
+                  <div
+                    class={{
+                      [`${rateClass.value}__tips-item`]: true,
+                      [`${rateClass.value}__tips-item--active`]:
+                        actualVal.value === Math.ceil(popoverValue.value) - 0.5,
+                    }}
+                    onClick={() => onSelect(Math.ceil(popoverValue.value) - 0.5)}
+                  >
+                    {h(iconComponent(Math.ceil(popoverValue.value), Math.ceil(popoverValue.value) - 0.5), {
+                      style: { ...colors.value },
+                      class: `${rateClass.value}__icon ${rateClass.value}__icon--unselected`,
+                    })}
+                    <span class={`${rateClass.value}__tips-text`}>{Math.ceil(popoverValue.value) - 0.5}</span>
+                  </div>
+                )}
+                <div
+                  class={{
+                    [`${rateClass.value}__tips-item`]: true,
+                    [`${rateClass.value}__tips-item--active`]:
+                      props.allowHalf && actualVal.value === Math.ceil(popoverValue.value),
+                  }}
+                  onClick={() => onSelect(Math.ceil(popoverValue.value))}
+                >
+                  {h(iconComponent(Math.ceil(popoverValue.value), Math.ceil(popoverValue.value)), {
+                    style: { ...colors.value },
+                    class: `${rateClass.value}__icon ${rateClass.value}__icon--selected`,
+                  })}
+                  <span class={`${rateClass.value}__tips-text`}>{Math.ceil(popoverValue.value)}</span>
+                </div>
+              </div>
+            ) : (
+              <div class={`${rateClass.value}__tips-item`} onClick={() => onSelect(popoverValue.value)}>
+                {h(iconComponent(Math.ceil(popoverValue.value), popoverValue.value), {
+                  style: { ...colors.value },
+                  class: {
+                    [`${rateClass.value}__icon`]: true,
+                    [`${rateClass.value}__icon--selected`]: Math.ceil(popoverValue.value) === popoverValue.value,
+                    [`${rateClass.value}__icon--unselected`]: Math.ceil(popoverValue.value) !== popoverValue.value,
+                  },
+                })}
+                <span class={`${rateClass.value}__tips-text`}>{popoverValue.value}</span>
+              </div>
+            )}
+          </div>
+        );
+      };
+
+      return (
+        <div class={rootClasses.value}>
+          {renderRateWrapper()}
+          {renderRateText()}
+          {renderRateTips()}
+        </div>
+      );
     };
   },
 });
-</script>