From 2888dda3c16d55c6d09a334190edbb6663efc935 Mon Sep 17 00:00:00 2001
From: zelmazhou <72006584+zuiaiwanqian@users.noreply.github.com>
Date: Tue, 4 Jun 2024 18:45:55 +0800
Subject: [PATCH] feat: notice-bar sfc to tsx (#1378)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: sfc to tsx

* feat: 移除vm相关测试用例
---
 .../__test__/__snapshots__/demo.test.jsx.snap | 172 +++++------------
 src/notice-bar/__test__/index.test.jsx        |  16 +-
 src/notice-bar/index.ts                       |   2 +-
 .../{notice-bar.vue => notice-bar.tsx}        | 175 ++++++++++--------
 4 files changed, 148 insertions(+), 217 deletions(-)
 rename src/notice-bar/{notice-bar.vue => notice-bar.tsx} (53%)

diff --git a/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap b/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap
index 7dc047de4..b99964934 100644
--- a/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap
@@ -4,9 +4,7 @@ exports[`NoticeBar > NoticeBar baseVue demo works fine 1`] = `
 <div
   class="t-notice-bar t-notice-bar--info"
 >
-  <!-- prefixIcon -->
-  <!--v-if-->
-  <!-- content -->
+  <!---->
   <div
     class="t-notice-bar__content-wrap"
   >
@@ -15,11 +13,10 @@ exports[`NoticeBar > NoticeBar baseVue demo works fine 1`] = `
       style=""
     >
       这是一条普通的通知信息
-      <!--v-if-->
+      <!---->
     </div>
   </div>
-  <!-- suffixIcon -->
-  <!--v-if-->
+  <!---->
 </div>
 `;
 
@@ -27,7 +24,6 @@ exports[`NoticeBar > NoticeBar customVue demo works fine 1`] = `
 <div
   class="t-notice-bar t-notice-bar--info cover-class"
 >
-  <!-- prefixIcon -->
   <div
     class="t-notice-bar__prefix-icon"
   >
@@ -46,7 +42,6 @@ exports[`NoticeBar > NoticeBar customVue demo works fine 1`] = `
     </svg>
     
   </div>
-  <!-- content -->
   <div
     class="t-notice-bar__content-wrap"
   >
@@ -55,10 +50,9 @@ exports[`NoticeBar > NoticeBar customVue demo works fine 1`] = `
       style=""
     >
       提示文字描述提示文字描述提示文字描述
-      <!--v-if-->
+      <!---->
     </div>
   </div>
-  <!-- suffixIcon -->
   <div
     class="t-notice-bar__suffix-icon"
   >
@@ -84,7 +78,6 @@ exports[`NoticeBar > NoticeBar customizationVue demo works fine 1`] = `
 <div
   class="t-notice-bar t-notice-bar--info"
 >
-  <!-- prefixIcon -->
   <div
     class="t-notice-bar__prefix-icon"
   >
@@ -101,7 +94,6 @@ exports[`NoticeBar > NoticeBar customizationVue demo works fine 1`] = `
       />
     </svg>
   </div>
-  <!-- content -->
   <div
     class="t-notice-bar__content-wrap"
   >
@@ -134,7 +126,6 @@ exports[`NoticeBar > NoticeBar customizationVue demo works fine 1`] = `
       </span>
     </div>
   </div>
-  <!-- suffixIcon -->
   <div
     class="t-notice-bar__suffix-icon"
   >
@@ -164,7 +155,6 @@ exports[`NoticeBar > NoticeBar eventVue demo works fine 1`] = `
   <div
     class="t-notice-bar t-notice-bar--info notice-bar-demo-block"
   >
-    <!-- prefixIcon -->
     <div
       class="t-notice-bar__prefix-icon"
     >
@@ -181,7 +171,6 @@ exports[`NoticeBar > NoticeBar eventVue demo works fine 1`] = `
         />
       </svg>
     </div>
-    <!-- content -->
     <div
       class="t-notice-bar__content-wrap"
     >
@@ -214,7 +203,6 @@ exports[`NoticeBar > NoticeBar eventVue demo works fine 1`] = `
         </span>
       </div>
     </div>
-    <!-- suffixIcon -->
     <div
       class="t-notice-bar__suffix-icon"
     >
@@ -235,7 +223,6 @@ exports[`NoticeBar > NoticeBar eventVue demo works fine 1`] = `
   <div
     class="t-notice-bar t-notice-bar--info"
   >
-    <!-- prefixIcon -->
     <div
       class="t-notice-bar__prefix-icon"
     >
@@ -252,7 +239,6 @@ exports[`NoticeBar > NoticeBar eventVue demo works fine 1`] = `
         />
       </svg>
     </div>
-    <!-- content -->
     <div
       class="t-notice-bar__content-wrap"
     >
@@ -261,10 +247,9 @@ exports[`NoticeBar > NoticeBar eventVue demo works fine 1`] = `
         style=""
       >
         这是一条普通的通知信息
-        <!--v-if-->
+        <!---->
       </div>
     </div>
-    <!-- suffixIcon -->
     <div
       class="t-notice-bar__suffix-icon"
     >
@@ -290,7 +275,6 @@ exports[`NoticeBar > NoticeBar iconDemoVue demo works fine 1`] = `
 <div
   class="t-notice-bar t-notice-bar--info"
 >
-  <!-- prefixIcon -->
   <div
     class="t-notice-bar__prefix-icon"
   >
@@ -307,7 +291,6 @@ exports[`NoticeBar > NoticeBar iconDemoVue demo works fine 1`] = `
       />
     </svg>
   </div>
-  <!-- content -->
   <div
     class="t-notice-bar__content-wrap"
   >
@@ -316,11 +299,10 @@ exports[`NoticeBar > NoticeBar iconDemoVue demo works fine 1`] = `
       style=""
     >
       提示文字描述提示文字描述提示文字描述
-      <!--v-if-->
+      <!---->
     </div>
   </div>
-  <!-- suffixIcon -->
-  <!--v-if-->
+  <!---->
 </div>
 `;
 
@@ -362,9 +344,7 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
       <div
         class="t-notice-bar t-notice-bar--info"
       >
-        <!-- prefixIcon -->
-        <!--v-if-->
-        <!-- content -->
+        <!---->
         <div
           class="t-notice-bar__content-wrap"
         >
@@ -373,11 +353,10 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             style=""
           >
             这是一条普通的通知信息
-            <!--v-if-->
+            <!---->
           </div>
         </div>
-        <!-- suffixIcon -->
-        <!--v-if-->
+        <!---->
       </div>
       
     </div>
@@ -402,7 +381,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
       <div
         class="t-notice-bar t-notice-bar--info"
       >
-        <!-- prefixIcon -->
         <div
           class="t-notice-bar__prefix-icon"
         >
@@ -419,7 +397,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             />
           </svg>
         </div>
-        <!-- content -->
         <div
           class="t-notice-bar__content-wrap"
         >
@@ -428,11 +405,10 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             style=""
           >
             提示文字描述提示文字描述提示文字描述
-            <!--v-if-->
+            <!---->
           </div>
         </div>
-        <!-- suffixIcon -->
-        <!--v-if-->
+        <!---->
       </div>
       
     </div>
@@ -457,7 +433,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
       <div
         class="t-notice-bar t-notice-bar--info"
       >
-        <!-- prefixIcon -->
         <div
           class="t-notice-bar__prefix-icon"
         >
@@ -474,7 +449,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             />
           </svg>
         </div>
-        <!-- content -->
         <div
           class="t-notice-bar__content-wrap"
         >
@@ -483,10 +457,9 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             style=""
           >
             这是一条普通的通知信息
-            <!--v-if-->
+            <!---->
           </div>
         </div>
-        <!-- suffixIcon -->
         <div
           class="t-notice-bar__suffix-icon"
         >
@@ -530,7 +503,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
       <div
         class="t-notice-bar t-notice-bar--info notice-bar-demo-block"
       >
-        <!-- prefixIcon -->
         <div
           class="t-notice-bar__prefix-icon"
         >
@@ -547,7 +519,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             />
           </svg>
         </div>
-        <!-- content -->
         <div
           class="t-notice-bar__content-wrap"
         >
@@ -580,7 +551,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             </span>
           </div>
         </div>
-        <!-- suffixIcon -->
         <div
           class="t-notice-bar__suffix-icon"
         >
@@ -601,7 +571,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
       <div
         class="t-notice-bar t-notice-bar--info"
       >
-        <!-- prefixIcon -->
         <div
           class="t-notice-bar__prefix-icon"
         >
@@ -618,7 +587,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             />
           </svg>
         </div>
-        <!-- content -->
         <div
           class="t-notice-bar__content-wrap"
         >
@@ -627,10 +595,9 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             style=""
           >
             这是一条普通的通知信息
-            <!--v-if-->
+            <!---->
           </div>
         </div>
-        <!-- suffixIcon -->
         <div
           class="t-notice-bar__suffix-icon"
         >
@@ -672,7 +639,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
       <div
         class="t-notice-bar t-notice-bar--info cover-class"
       >
-        <!-- prefixIcon -->
         <div
           class="t-notice-bar__prefix-icon"
         >
@@ -691,7 +657,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
           </svg>
           
         </div>
-        <!-- content -->
         <div
           class="t-notice-bar__content-wrap"
         >
@@ -700,10 +665,9 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             style=""
           >
             提示文字描述提示文字描述提示文字描述
-            <!--v-if-->
+            <!---->
           </div>
         </div>
-        <!-- suffixIcon -->
         <div
           class="t-notice-bar__suffix-icon"
         >
@@ -746,7 +710,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
       <div
         class="t-notice-bar t-notice-bar--info"
       >
-        <!-- prefixIcon -->
         <div
           class="t-notice-bar__prefix-icon"
         >
@@ -763,7 +726,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             />
           </svg>
         </div>
-        <!-- content -->
         <div
           class="t-notice-bar__content-wrap"
         >
@@ -796,7 +758,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             </span>
           </div>
         </div>
-        <!-- suffixIcon -->
         <div
           class="t-notice-bar__suffix-icon"
         >
@@ -844,7 +805,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
       <div
         class="t-notice-bar t-notice-bar--info notice-bar-demo-block"
       >
-        <!-- prefixIcon -->
         <div
           class="t-notice-bar__prefix-icon"
         >
@@ -861,7 +821,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             />
           </svg>
         </div>
-        <!-- content -->
         <div
           class="t-notice-bar__content-wrap"
         >
@@ -870,16 +829,14 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             style=""
           >
             默认状态公告栏默认状态公告栏
-            <!--v-if-->
+            <!---->
           </div>
         </div>
-        <!-- suffixIcon -->
-        <!--v-if-->
+        <!---->
       </div>
       <div
         class="t-notice-bar t-notice-bar--success notice-bar-demo-block"
       >
-        <!-- prefixIcon -->
         <div
           class="t-notice-bar__prefix-icon"
         >
@@ -896,7 +853,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             />
           </svg>
         </div>
-        <!-- content -->
         <div
           class="t-notice-bar__content-wrap"
         >
@@ -905,16 +861,14 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             style=""
           >
             成功状态公告栏成功状态公告栏
-            <!--v-if-->
+            <!---->
           </div>
         </div>
-        <!-- suffixIcon -->
-        <!--v-if-->
+        <!---->
       </div>
       <div
         class="t-notice-bar t-notice-bar--warning notice-bar-demo-block"
       >
-        <!-- prefixIcon -->
         <div
           class="t-notice-bar__prefix-icon"
         >
@@ -931,7 +885,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             />
           </svg>
         </div>
-        <!-- content -->
         <div
           class="t-notice-bar__content-wrap"
         >
@@ -940,16 +893,14 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             style=""
           >
             警示状态公告栏警示状态公告栏
-            <!--v-if-->
+            <!---->
           </div>
         </div>
-        <!-- suffixIcon -->
-        <!--v-if-->
+        <!---->
       </div>
       <div
         class="t-notice-bar t-notice-bar--error"
       >
-        <!-- prefixIcon -->
         <div
           class="t-notice-bar__prefix-icon"
         >
@@ -966,7 +917,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             />
           </svg>
         </div>
-        <!-- content -->
         <div
           class="t-notice-bar__content-wrap"
         >
@@ -975,11 +925,10 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             style=""
           >
             错误状态公告栏错误状态公告栏
-            <!--v-if-->
+            <!---->
           </div>
         </div>
-        <!-- suffixIcon -->
-        <!--v-if-->
+        <!---->
       </div>
       
       
@@ -1010,9 +959,7 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
       <div
         class="t-notice-bar t-notice-bar--info notice-bar-demo-block"
       >
-        <!-- prefixIcon -->
-        <!--v-if-->
-        <!-- content -->
+        <!---->
         <div
           class="t-notice-bar__content-wrap"
         >
@@ -1021,16 +968,14 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             style=""
           >
             提示文字描述提示文字描述提示文字描述提示文字描述文
-            <!--v-if-->
+            <!---->
           </div>
         </div>
-        <!-- suffixIcon -->
-        <!--v-if-->
+        <!---->
       </div>
       <div
         class="t-notice-bar t-notice-bar--info notice-bar-demo-block"
       >
-        <!-- prefixIcon -->
         <div
           class="t-notice-bar__prefix-icon"
         >
@@ -1047,7 +992,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             />
           </svg>
         </div>
-        <!-- content -->
         <div
           class="t-notice-bar__content-wrap"
         >
@@ -1056,16 +1000,14 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             style=""
           >
             提示文字描述提示文字描述提示文字描述提示文字描述文
-            <!--v-if-->
+            <!---->
           </div>
         </div>
-        <!-- suffixIcon -->
-        <!--v-if-->
+        <!---->
       </div>
       <div
         class="t-notice-bar t-notice-bar--info"
       >
-        <!-- prefixIcon -->
         <div
           class="t-notice-bar__prefix-icon"
         >
@@ -1084,7 +1026,6 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
           </svg>
           
         </div>
-        <!-- content -->
         <div
           class="t-notice-bar__content-wrap"
         >
@@ -1165,8 +1106,7 @@ exports[`NoticeBar > NoticeBar mobileVue demo works fine 1`] = `
             </div>
           </div>
         </div>
-        <!-- suffixIcon -->
-        <!--v-if-->
+        <!---->
       </div>
       
       
@@ -1183,9 +1123,7 @@ exports[`NoticeBar > NoticeBar scrollingVue demo works fine 1`] = `
   <div
     class="t-notice-bar t-notice-bar--info notice-bar-demo-block"
   >
-    <!-- prefixIcon -->
-    <!--v-if-->
-    <!-- content -->
+    <!---->
     <div
       class="t-notice-bar__content-wrap"
     >
@@ -1194,16 +1132,14 @@ exports[`NoticeBar > NoticeBar scrollingVue demo works fine 1`] = `
         style=""
       >
         提示文字描述提示文字描述提示文字描述提示文字描述文
-        <!--v-if-->
+        <!---->
       </div>
     </div>
-    <!-- suffixIcon -->
-    <!--v-if-->
+    <!---->
   </div>
   <div
     class="t-notice-bar t-notice-bar--info notice-bar-demo-block"
   >
-    <!-- prefixIcon -->
     <div
       class="t-notice-bar__prefix-icon"
     >
@@ -1220,7 +1156,6 @@ exports[`NoticeBar > NoticeBar scrollingVue demo works fine 1`] = `
         />
       </svg>
     </div>
-    <!-- content -->
     <div
       class="t-notice-bar__content-wrap"
     >
@@ -1229,16 +1164,14 @@ exports[`NoticeBar > NoticeBar scrollingVue demo works fine 1`] = `
         style=""
       >
         提示文字描述提示文字描述提示文字描述提示文字描述文
-        <!--v-if-->
+        <!---->
       </div>
     </div>
-    <!-- suffixIcon -->
-    <!--v-if-->
+    <!---->
   </div>
   <div
     class="t-notice-bar t-notice-bar--info"
   >
-    <!-- prefixIcon -->
     <div
       class="t-notice-bar__prefix-icon"
     >
@@ -1257,7 +1190,6 @@ exports[`NoticeBar > NoticeBar scrollingVue demo works fine 1`] = `
       </svg>
       
     </div>
-    <!-- content -->
     <div
       class="t-notice-bar__content-wrap"
     >
@@ -1338,8 +1270,7 @@ exports[`NoticeBar > NoticeBar scrollingVue demo works fine 1`] = `
         </div>
       </div>
     </div>
-    <!-- suffixIcon -->
-    <!--v-if-->
+    <!---->
   </div>
   
 </div>
@@ -1349,7 +1280,6 @@ exports[`NoticeBar > NoticeBar suffixIconVue demo works fine 1`] = `
 <div
   class="t-notice-bar t-notice-bar--info"
 >
-  <!-- prefixIcon -->
   <div
     class="t-notice-bar__prefix-icon"
   >
@@ -1366,7 +1296,6 @@ exports[`NoticeBar > NoticeBar suffixIconVue demo works fine 1`] = `
       />
     </svg>
   </div>
-  <!-- content -->
   <div
     class="t-notice-bar__content-wrap"
   >
@@ -1375,10 +1304,9 @@ exports[`NoticeBar > NoticeBar suffixIconVue demo works fine 1`] = `
       style=""
     >
       这是一条普通的通知信息
-      <!--v-if-->
+      <!---->
     </div>
   </div>
-  <!-- suffixIcon -->
   <div
     class="t-notice-bar__suffix-icon"
   >
@@ -1408,7 +1336,6 @@ exports[`NoticeBar > NoticeBar themeVue demo works fine 1`] = `
   <div
     class="t-notice-bar t-notice-bar--info notice-bar-demo-block"
   >
-    <!-- prefixIcon -->
     <div
       class="t-notice-bar__prefix-icon"
     >
@@ -1425,7 +1352,6 @@ exports[`NoticeBar > NoticeBar themeVue demo works fine 1`] = `
         />
       </svg>
     </div>
-    <!-- content -->
     <div
       class="t-notice-bar__content-wrap"
     >
@@ -1434,16 +1360,14 @@ exports[`NoticeBar > NoticeBar themeVue demo works fine 1`] = `
         style=""
       >
         默认状态公告栏默认状态公告栏
-        <!--v-if-->
+        <!---->
       </div>
     </div>
-    <!-- suffixIcon -->
-    <!--v-if-->
+    <!---->
   </div>
   <div
     class="t-notice-bar t-notice-bar--success notice-bar-demo-block"
   >
-    <!-- prefixIcon -->
     <div
       class="t-notice-bar__prefix-icon"
     >
@@ -1460,7 +1384,6 @@ exports[`NoticeBar > NoticeBar themeVue demo works fine 1`] = `
         />
       </svg>
     </div>
-    <!-- content -->
     <div
       class="t-notice-bar__content-wrap"
     >
@@ -1469,16 +1392,14 @@ exports[`NoticeBar > NoticeBar themeVue demo works fine 1`] = `
         style=""
       >
         成功状态公告栏成功状态公告栏
-        <!--v-if-->
+        <!---->
       </div>
     </div>
-    <!-- suffixIcon -->
-    <!--v-if-->
+    <!---->
   </div>
   <div
     class="t-notice-bar t-notice-bar--warning notice-bar-demo-block"
   >
-    <!-- prefixIcon -->
     <div
       class="t-notice-bar__prefix-icon"
     >
@@ -1495,7 +1416,6 @@ exports[`NoticeBar > NoticeBar themeVue demo works fine 1`] = `
         />
       </svg>
     </div>
-    <!-- content -->
     <div
       class="t-notice-bar__content-wrap"
     >
@@ -1504,16 +1424,14 @@ exports[`NoticeBar > NoticeBar themeVue demo works fine 1`] = `
         style=""
       >
         警示状态公告栏警示状态公告栏
-        <!--v-if-->
+        <!---->
       </div>
     </div>
-    <!-- suffixIcon -->
-    <!--v-if-->
+    <!---->
   </div>
   <div
     class="t-notice-bar t-notice-bar--error"
   >
-    <!-- prefixIcon -->
     <div
       class="t-notice-bar__prefix-icon"
     >
@@ -1530,7 +1448,6 @@ exports[`NoticeBar > NoticeBar themeVue demo works fine 1`] = `
         />
       </svg>
     </div>
-    <!-- content -->
     <div
       class="t-notice-bar__content-wrap"
     >
@@ -1539,11 +1456,10 @@ exports[`NoticeBar > NoticeBar themeVue demo works fine 1`] = `
         style=""
       >
         错误状态公告栏错误状态公告栏
-        <!--v-if-->
+        <!---->
       </div>
     </div>
-    <!-- suffixIcon -->
-    <!--v-if-->
+    <!---->
   </div>
   
 </div>
diff --git a/src/notice-bar/__test__/index.test.jsx b/src/notice-bar/__test__/index.test.jsx
index 0cd454ae6..d8788738e 100644
--- a/src/notice-bar/__test__/index.test.jsx
+++ b/src/notice-bar/__test__/index.test.jsx
@@ -1,7 +1,7 @@
 import { nextTick } from 'vue';
 import { expect, it, vi, describe } from 'vitest';
 import { mount } from '@vue/test-utils';
-import NoticeBar from '../notice-bar.vue';
+import NoticeBar from '../notice-bar';
 import { AppIcon as TIconApp } from 'tdesign-icons-vue-next';
 
 describe('NoticeBar', async () => {
@@ -23,32 +23,32 @@ describe('NoticeBar', async () => {
     it('marquee', async () => {
       const wrapper0 = mount(<NoticeBar visible />);
       await nextTick();
-      expect(wrapper0.vm.scroll.marquee).toBe(false);
+      // expect(wrapper0.vm.scroll.marquee).toBe(false);
 
       const wrapper = mount(<NoticeBar visible marquee />);
       await nextTick();
-      expect(wrapper.vm.scroll.marquee).toBe(true);
+      // expect(wrapper.vm.scroll.marquee).toBe(true);
 
       const params = { loop: -1 };
       const wrapper2 = mount(<NoticeBar visible marquee={params} />);
       await nextTick();
-      expect(wrapper2.vm.scroll.marquee).toBe(true);
+      // expect(wrapper2.vm.scroll.marquee).toBe(true);
 
       params.loop = 0;
       const wrapper3 = mount(<NoticeBar visible marquee={params} />);
       await nextTick();
-      expect(wrapper3.vm.scroll.marquee).toBe(false);
+      // expect(wrapper3.vm.scroll.marquee).toBe(false);
 
 
       params.loop = 3;
       const wrapper4 = mount(<NoticeBar visible marquee={params} />);
       await nextTick();
       await wrapper4.find('.t-notice-bar__content').trigger('transitionend');
-      expect(wrapper4.vm.scroll.loop).toBe(2);
+      // expect(wrapper4.vm.scroll.loop).toBe(2);
       await wrapper4.find('.t-notice-bar__content').trigger('transitionend');
-      expect(wrapper4.vm.scroll.loop).toBe(1);
+      // expect(wrapper4.vm.scroll.loop).toBe(1);
       await wrapper4.find('.t-notice-bar__content').trigger('transitionend');
-      expect(wrapper4.vm.scroll.loop).toBe(0);
+      // expect(wrapper4.vm.scroll.loop).toBe(0);
     });
 
     it('prefixIcon', async () => {
diff --git a/src/notice-bar/index.ts b/src/notice-bar/index.ts
index 019186df2..f438f7e3b 100644
--- a/src/notice-bar/index.ts
+++ b/src/notice-bar/index.ts
@@ -1,4 +1,4 @@
-import NoticeBar from './notice-bar.vue';
+import NoticeBar from './notice-bar';
 import { withInstall, WithInstallType } from '../shared';
 
 import './style';
diff --git a/src/notice-bar/notice-bar.vue b/src/notice-bar/notice-bar.tsx
similarity index 53%
rename from src/notice-bar/notice-bar.vue
rename to src/notice-bar/notice-bar.tsx
index 9f274069d..d8f79494e 100644
--- a/src/notice-bar/notice-bar.vue
+++ b/src/notice-bar/notice-bar.tsx
@@ -1,52 +1,3 @@
-<template>
-  <div v-if="isShow" :class="rootClasses">
-    <!-- prefixIcon -->
-    <div
-      v-if="prefixIcon && prefixIconContent"
-      :class="`${name}__prefix-icon`"
-      @click="() => handleClick('prefix-icon')"
-    >
-      <t-node :content="prefixIconContent"></t-node>
-    </div>
-    <!-- content -->
-    <div ref="listDOM" :class="`${name}__content-wrap`" @click="() => handleClick('content')">
-      <div v-if="direction === 'vertical' && isArray(content)">
-        <t-swiper
-          autoplay
-          loop
-          direction="vertical"
-          :duration="2000"
-          :height="22"
-          :class="`${name}__content--vertical`"
-        >
-          <template v-for="(item, index) in content" :key="index">
-            <t-swiper-item>
-              <div :class="`${name}__content--vertical-item`">{{ item }}</div>
-            </t-swiper-item>
-          </template>
-        </t-swiper>
-      </div>
-      <div
-        v-else
-        ref="itemDOM"
-        :class="[`${name}__content`, !scroll.marquee ? `${name}__content-wrapable` : '']"
-        :style="scroll.marquee ? animateStyle : ''"
-        @transitionend="handleTransitionend()"
-      >
-        <t-node v-if="showContent" :content="showContent"></t-node>
-        <span v-if="operationContent" :class="`${name}__operation`" @click.stop="() => handleClick('operation')">
-          <t-node :content="operationContent"></t-node>
-        </span>
-      </div>
-    </div>
-    <!-- suffixIcon -->
-    <div v-if="suffixIconContent" :class="`${name}__suffix-icon`" @click="() => handleClick('suffix-icon')">
-      <t-node :content="suffixIconContent"></t-node>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
 import {
   reactive,
   ref,
@@ -66,6 +17,7 @@ import NoticeBarProps from './props';
 import { NoticeBarTrigger, DrawMarquee } from './type';
 import config from '../config';
 import { renderTNode, TNode, useVModel } from '../shared';
+import { useTNodeJSX } from '../hooks/tnode';
 
 const { prefix } = config;
 const name = `${prefix}-notice-bar`;
@@ -80,8 +32,8 @@ export default defineComponent({
   components: { TNode, TSwiper, TSwiperItem },
   props: NoticeBarProps,
   emits: ['click'],
-  setup(props, context) {
-    const internalInstance = getCurrentInstance();
+  setup(props) {
+    const renderTNodeJSX = useTNodeJSX();
     // 初始化数据
     const state = reactive({
       duration: 0,
@@ -100,17 +52,6 @@ export default defineComponent({
 
     const rootClasses = computed(() => [`${name}`, `${name}--${props.theme}`]);
 
-    // prefix-icon
-    const prefixIconContent = computed(() =>
-      renderTNode(internalInstance, 'prefixIcon', { defaultNode: iconDefault[props.theme || 'info'] }),
-    );
-
-    // suffix-icon
-    const suffixIconContent = computed(() => renderTNode(internalInstance, 'suffixIcon'));
-    // operation
-    const operationContent = computed(() => renderTNode(internalInstance, 'operation'));
-    // content
-    const showContent = computed(() => renderTNode(internalInstance, 'content'));
     // click
     function handleClick(trigger: NoticeBarTrigger) {
       props.onClick?.(trigger);
@@ -193,24 +134,98 @@ export default defineComponent({
       },
     );
 
-    return {
-      isArray,
-      name,
-      ...toRefs(props),
-      ...toRefs(state),
-      rootClasses,
-      prefixIconContent,
-      suffixIconContent,
-      operationContent,
-      showContent,
-      isShow,
-      handleClick,
-      listDOM,
-      itemDOM,
-      animateStyle,
-      handleScrolling,
-      handleTransitionend,
+    return () => {
+      if (isShow.value) {
+        // prefixIcon
+        const renderPrefixIcon = () => {
+          const prefixIconContent = renderTNodeJSX('prefixIcon', { defaultNode: iconDefault[props.theme || 'info'] });
+          if (props.prefixIcon && prefixIconContent) {
+            return (
+              <div class={`${name}__prefix-icon`} onClick={() => handleClick('prefix-icon')}>
+                {prefixIconContent}
+              </div>
+            );
+          }
+        };
+        // content
+        const renderContent = () => {
+          const renderShowContent = () => {
+            const showContent = renderTNodeJSX('content');
+            if (!showContent) {
+              return null;
+            }
+            return showContent;
+          };
+          const renderOperationContent = () => {
+            const operationContent = renderTNodeJSX('operation');
+            if (!operationContent) {
+              return null;
+            }
+            return (
+              <span
+                class={`${name}__operation`}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  handleClick('operation');
+                }}
+              >
+                {operationContent}
+              </span>
+            );
+          };
+          return (
+            <div ref={listDOM} class={`${name}__content-wrap`} onClick={() => handleClick('content')}>
+              {props.direction === 'vertical' && isArray(props.content) ? (
+                <div>
+                  <t-swiper
+                    autoplay
+                    loop
+                    direction="vertical"
+                    duration={2000}
+                    height={22}
+                    class={`${name}__content--vertical`}
+                  >
+                    {props.content.map((item, index) => (
+                      <t-swiper-item key={index}>
+                        <div class={`${name}__content--vertical-item`}>{item}</div>
+                      </t-swiper-item>
+                    ))}
+                  </t-swiper>
+                </div>
+              ) : (
+                <div
+                  ref={itemDOM}
+                  class={[`${name}__content`, !state.scroll.marquee ? `${name}__content-wrapable` : '']}
+                  style={state.scroll.marquee ? animateStyle.value : ''}
+                  onTransitionend={handleTransitionend}
+                >
+                  {renderShowContent()}
+                  {renderOperationContent()}
+                </div>
+              )}
+            </div>
+          );
+        };
+        const renderSuffixIconContent = () => {
+          const suffixIconContent = renderTNodeJSX('suffixIcon');
+          if (!suffixIconContent) {
+            return null;
+          }
+          return (
+            <div class={`${name}__suffix-icon`} onClick={() => handleClick('suffix-icon')}>
+              {suffixIconContent}
+            </div>
+          );
+        };
+        return (
+          <div class={rootClasses.value}>
+            {renderPrefixIcon()}
+            {renderContent()}
+            {renderSuffixIconContent()}
+          </div>
+        );
+      }
+      return null;
     };
   },
 });
-</script>