diff --git a/src/message/message.en-US.md b/src/message/message.en-US.md
index 552582dd4..6c8dd324e 100644
--- a/src/message/message.en-US.md
+++ b/src/message/message.en-US.md
@@ -1,19 +1,20 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Message Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-align | String | left | options：left/center。Typescript：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
+align | String | left | options: left/center。Typescript：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
 closeBtn | String / Boolean / Slot / Function | undefined | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 duration | Number | 3000 | \- | N
 icon | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 link | String / Object / Slot / Function | - | Typescript：`string \| object \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-marquee | Boolean / Object | false | Typescript：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
+marquee | Boolean / Object | false | Typescript：`boolean \| MessageMarquee` `interface MessageMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
 offset | Array | - | Typescript：`Array<string \| number>` | N
-theme | String | info | options：info/success/warning/error。Typescript：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
+theme | String | info | options: info/success/warning/error。Typescript：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
 visible | Boolean | false | `v-model` and `v-model:visible` is supported | N
 defaultVisible | Boolean | false | uncontrolled property | N
 zIndex | Number | - | \- | N
@@ -29,8 +30,8 @@ close-btn-click | `(context: { e: MouseEvent })` | \-
 duration-end | \- | \-
 link-click | `(context: { e: MouseEvent })` | \-
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -42,4 +43,4 @@ Name | Default Value | Description
 --td-message-error-color | @error-color | - 
 --td-message-info-color | @brand-color | - 
 --td-message-success-color | @success-color | - 
---td-message-warning-color | @warning-color | - 
+--td-message-warning-color | @warning-color | -
\ No newline at end of file
diff --git a/src/message/message.md b/src/message/message.md
index ef6ef6838..19aa0f969 100644
--- a/src/message/message.md
+++ b/src/message/message.md
@@ -1,17 +1,18 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Message Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 align | String | left | 文本对齐方式。可选项：left/center。TS 类型：`MessageAlignType` `type MessageAlignType = 'left' \| 'center'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
 closeBtn | String / Boolean / Slot / Function | undefined | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 content | String / Slot / Function | - | 用于自定义消息弹出内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。 | N
 icon | Boolean / Slot / Function | true | 用于自定义消息前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-link | String / Object / Slot / Function | - | 链接名称。值为字符串表示链接名称，值为 Object 类型，表示透传至 Link。TS 类型：`string \| object \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
+link | String / Object / Slot / Function | - | 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link`。TS 类型：`string \| object \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| MessageMarquee` `interface MessageMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
 offset | Array | - | 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10rpx', '8rpx']。TS 类型：`Array<string \| number>` | N
 theme | String | info | 消息组件风格。可选项：info/success/warning/error。TS 类型：`MessageThemeList` `type MessageThemeList = 'info' \| 'success' \| 'warning' \| 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/message/type.ts) | N
 visible | Boolean | false | 是否显示，隐藏时默认销毁组件。支持语法糖 `v-model` 或 `v-model:visible` | N
@@ -19,7 +20,7 @@ defaultVisible | Boolean | false | 是否显示，隐藏时默认销毁组件。
 zIndex | Number | - | 元素层级，样式默认为 5000 | N
 onCloseBtnClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>当关闭按钮存在时，用户点击关闭按钮触发 | N
 onDurationEnd | Function |  | TS 类型：`() => void`<br/>计时结束后触发 | N
-onLinkClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>当link链接存在时，点击链接文本时触发 | N
+onLinkClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>当`link`链接存在时，点击链接文本时触发 | N
 
 ### Message Events
 
@@ -27,10 +28,10 @@ onLinkClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<b
 -- | -- | --
 close-btn-click | `(context: { e: MouseEvent })` | 当关闭按钮存在时，用户点击关闭按钮触发
 duration-end | \- | 计时结束后触发
-link-click | `(context: { e: MouseEvent })` | 当link链接存在时，点击链接文本时触发
-
+link-click | `(context: { e: MouseEvent })` | 当`link`链接存在时，点击链接文本时触发
 
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -42,4 +43,4 @@ link-click | `(context: { e: MouseEvent })` | 当link链接存在时，点击链
 --td-message-error-color | @error-color | - 
 --td-message-info-color | @brand-color | - 
 --td-message-success-color | @success-color | - 
---td-message-warning-color | @warning-color | - 
+--td-message-warning-color | @warning-color | -
\ No newline at end of file
diff --git a/src/message/message.tsx b/src/message/message.tsx
index d38edea4e..42952cc60 100644
--- a/src/message/message.tsx
+++ b/src/message/message.tsx
@@ -5,14 +5,13 @@ import isString from 'lodash/isString';
 
 import Link from '../link';
 import props from './props';
-import { DrawMarquee, TdMessageProps } from './type';
+import { MessageMarquee, TdMessageProps } from './type';
 import config from '../config';
 import { useVModel } from '../shared';
 import { usePrefixClass } from '../hooks/useClass';
 import { useTNodeJSX, useContent } from '../hooks/tnode';
 
 const { prefix } = config;
-const name = `${prefix}-message`;
 const iconDefault = {
   info: h(InfoCircleFilledIcon),
   success: h(CheckCircleFilledIcon),
@@ -22,10 +21,8 @@ const iconDefault = {
 const closeBtnDefault = h(CloseIcon);
 
 export default defineComponent({
-  name,
+  name: `${prefix}-message`,
   props,
-  emits: ['durationEnd', 'closeBtnClick', 'update:value'],
-
   setup(props, context) {
     const componentName = usePrefixClass('message');
     const renderTNodeJSX = useTNodeJSX();
@@ -107,7 +104,7 @@ export default defineComponent({
     const textDOM = ref();
 
     const handleScrolling = () => {
-      if (!props?.marquee || (isObject(props?.marquee) && (props?.marquee as DrawMarquee))?.loop === 0) {
+      if (!props?.marquee || (isObject(props?.marquee) && (props?.marquee as MessageMarquee))?.loop === 0) {
         return;
       }
 
@@ -117,23 +114,23 @@ export default defineComponent({
         marquee: true,
         // 负数统一当作循环播放
         loop: Math.max(
-          props.marquee === true || (props.marquee as DrawMarquee)?.loop == null
+          props.marquee === true || (props.marquee as MessageMarquee)?.loop == null
             ? loop
-            : (props.marquee as DrawMarquee)?.loop,
+            : (props.marquee as MessageMarquee)?.loop,
           -1,
         ),
         // 速度必须为正数
         speed: Math.max(
-          props.marquee === true || (props.marquee as DrawMarquee)?.speed == null
+          props.marquee === true || (props.marquee as MessageMarquee)?.speed == null
             ? speed
-            : (props.marquee as DrawMarquee)?.speed,
+            : (props.marquee as MessageMarquee)?.speed,
           1,
         ),
         // 延迟不可为负数
         delay: Math.max(
-          props.marquee === true || (props.marquee as DrawMarquee)?.delay == null
+          props.marquee === true || (props.marquee as MessageMarquee)?.delay == null
             ? delay
-            : (props.marquee as DrawMarquee)?.delay,
+            : (props.marquee as MessageMarquee)?.delay,
           0,
         ),
       };
@@ -179,8 +176,8 @@ export default defineComponent({
       props.onLinkClick?.({ e });
     };
 
-    const onCloseBtnClick = () => {
-      props.onCloseBtnClick?.();
+    const onCloseBtnClick = (e: MouseEvent) => {
+      props.onCloseBtnClick?.({ e });
       setVisible(false);
     };
 
diff --git a/src/message/props.ts b/src/message/props.ts
index 099806102..37f2fc54d 100644
--- a/src/message/props.ts
+++ b/src/message/props.ts
@@ -36,7 +36,7 @@ export default {
     type: [Boolean, Function] as PropType<TdMessageProps['icon']>,
     default: true,
   },
-  /** 链接名称。值为字符串表示链接名称，值为 Object 类型，表示透传至 Link */
+  /** 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link` */
   link: {
     type: [String, Object, Function] as PropType<TdMessageProps['link']>,
   },
@@ -77,6 +77,6 @@ export default {
   onCloseBtnClick: Function as PropType<TdMessageProps['onCloseBtnClick']>,
   /** 计时结束后触发 */
   onDurationEnd: Function as PropType<TdMessageProps['onDurationEnd']>,
-  /** 当link链接存在时，点击链接文本时触发 */
+  /** 当`link`链接存在时，点击链接文本时触发 */
   onLinkClick: Function as PropType<TdMessageProps['onLinkClick']>,
 };
diff --git a/src/message/type.ts b/src/message/type.ts
index 432040844..bb60df27f 100644
--- a/src/message/type.ts
+++ b/src/message/type.ts
@@ -31,14 +31,14 @@ export interface TdMessageProps {
    */
   icon?: boolean | TNode;
   /**
-   * 链接名称。值为字符串表示链接名称，值为 Object 类型，表示透传至 Link
+   * 链接名称。值为字符串表示链接名称，值为 `Object` 类型，表示透传至 `Link`
    */
   link?: string | object | TNode;
   /**
    * 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放
    * @default false
    */
-  marquee?: boolean | DrawMarquee;
+  marquee?: boolean | MessageMarquee;
   /**
    * 相对于 placement 的偏移量，示例：[-10, 20] 或 ['10rpx', '8rpx']
    */
@@ -76,14 +76,14 @@ export interface TdMessageProps {
    */
   onDurationEnd?: () => void;
   /**
-   * 当link链接存在时，点击链接文本时触发
+   * 当`link`链接存在时，点击链接文本时触发
    */
   onLinkClick?: (context: { e: MouseEvent }) => void;
 }
 
 export type MessageAlignType = 'left' | 'center';
 
-export interface DrawMarquee {
+export interface MessageMarquee {
   speed?: number;
   loop?: number;
   delay?: number;
diff --git a/src/notice-bar/notice-bar.en-US.md b/src/notice-bar/notice-bar.en-US.md
index 343a782a3..999f36f49 100644
--- a/src/notice-bar/notice-bar.en-US.md
+++ b/src/notice-bar/notice-bar.en-US.md
@@ -1,17 +1,18 @@
 :: BASE_DOC ::
 
 ## API
+
 ### NoticeBar Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 content | String / Array / Slot / Function | - | Typescript：`string \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-direction | String | horizontal | options：horizontal/vertical | N
-marquee | Boolean / Object | false | Typescript：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts) | N
+direction | String | horizontal | options: horizontal/vertical | N
+marquee | Boolean / Object | false | Typescript：`boolean \| NoticeBarMarquee` `interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts) | N
 operation | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-prefixIcon | Boolean / Slot / Function | true | Typescript：`Boolean \ | TNode `。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+prefixIcon | Boolean / Slot / Function | true | Typescript：`Boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 suffixIcon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-theme | String | info | options：info/success/warning/error | N
+theme | String | info | options: info/success/warning/error | N
 visible | Boolean | false | `v-model` and `v-model:visible` is supported | N
 defaultVisible | Boolean | false | uncontrolled property | N
 onClick | Function |  | Typescript：`(trigger: NoticeBarTrigger) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/> | N
@@ -22,8 +23,8 @@ name | params | description
 -- | -- | --
 click | `(trigger: NoticeBarTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -37,4 +38,4 @@ Name | Default Value | Description
 --td-notice-bar-success-color | @success-color | - 
 --td-notice-bar-suffix-icon-color | @font-gray-3 | - 
 --td-notice-bar-warning-bg-color | @warning-color-1 | - 
---td-notice-bar-warning-color | @warning-color | - 
+--td-notice-bar-warning-color | @warning-color | -
\ No newline at end of file
diff --git a/src/notice-bar/notice-bar.md b/src/notice-bar/notice-bar.md
index 0dc3a2cc1..d860fea6e 100644
--- a/src/notice-bar/notice-bar.md
+++ b/src/notice-bar/notice-bar.md
@@ -1,15 +1,16 @@
 :: BASE_DOC ::
 
 ## API
+
 ### NoticeBar Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 content | String / Array / Slot / Function | - | 文本内容。TS 类型：`string \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 direction | String | horizontal | 滚动方向。可选项：horizontal/vertical | N
-marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts) | N
+marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean \| NoticeBarMarquee` `interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts) | N
 operation | String / Slot / Function | - | 右侧额外信息。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-prefixIcon | Boolean / Slot / Function | true | 用于自定义g公告栏前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标。TS 类型：`Boolean \ | TNode `。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+prefixIcon | Boolean / Slot / Function | true | 用于自定义公告栏前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标。TS 类型：`Boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 suffixIcon | Slot / Function | - | 后缀图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 theme | String | info | 内置主题。可选项：info/success/warning/error | N
 visible | Boolean | false | 显示/隐藏。支持语法糖 `v-model` 或 `v-model:visible` | N
@@ -22,8 +23,8 @@ onClick | Function |  | TS 类型：`(trigger: NoticeBarTrigger) => void`<br/>
 -- | -- | --
 click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
 
-
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -37,4 +38,4 @@ click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](http
 --td-notice-bar-success-color | @success-color | - 
 --td-notice-bar-suffix-icon-color | @font-gray-3 | - 
 --td-notice-bar-warning-bg-color | @warning-color-1 | - 
---td-notice-bar-warning-color | @warning-color | - 
+--td-notice-bar-warning-color | @warning-color | -
\ No newline at end of file
diff --git a/src/notice-bar/notice-bar.tsx b/src/notice-bar/notice-bar.tsx
index d8f79494e..76b80f2ea 100644
--- a/src/notice-bar/notice-bar.tsx
+++ b/src/notice-bar/notice-bar.tsx
@@ -1,38 +1,27 @@
-import {
-  reactive,
-  ref,
-  toRefs,
-  computed,
-  onMounted,
-  nextTick,
-  defineComponent,
-  h,
-  getCurrentInstance,
-  watch,
-} from 'vue';
+import { reactive, ref, toRefs, computed, onMounted, nextTick, defineComponent, watch } from 'vue';
 import { InfoCircleFilledIcon, CheckCircleFilledIcon } from 'tdesign-icons-vue-next';
 import isArray from 'lodash/isArray';
+import isObject from 'lodash/isObject';
 import { Swiper as TSwiper, SwiperItem as TSwiperItem } from '../swiper';
-import NoticeBarProps from './props';
-import { NoticeBarTrigger, DrawMarquee } from './type';
+import props from './props';
+import { NoticeBarTrigger, NoticeBarMarquee } from './type';
 import config from '../config';
-import { renderTNode, TNode, useVModel } from '../shared';
+import { useVModel } from '../shared';
 import { useTNodeJSX } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
 
 const { prefix } = config;
-const name = `${prefix}-notice-bar`;
 const iconDefault = {
-  info: h(InfoCircleFilledIcon),
-  success: h(CheckCircleFilledIcon),
-  warning: h(InfoCircleFilledIcon),
-  error: h(InfoCircleFilledIcon),
+  info: <InfoCircleFilledIcon />,
+  success: <CheckCircleFilledIcon />,
+  warning: <InfoCircleFilledIcon />,
+  error: <InfoCircleFilledIcon />,
 };
 export default defineComponent({
-  name,
-  components: { TNode, TSwiper, TSwiperItem },
-  props: NoticeBarProps,
-  emits: ['click'],
+  name: `${prefix}-notice-bar`,
+  props,
   setup(props) {
+    const noticeBarClass = usePrefixClass('notice-bar');
     const renderTNodeJSX = useTNodeJSX();
     // 初始化数据
     const state = reactive({
@@ -50,7 +39,7 @@ export default defineComponent({
       },
     });
 
-    const rootClasses = computed(() => [`${name}`, `${name}--${props.theme}`]);
+    const rootClasses = computed(() => [`${noticeBarClass.value}`, `${noticeBarClass.value}--${props.theme}`]);
 
     // click
     function handleClick(trigger: NoticeBarTrigger) {
@@ -69,20 +58,23 @@ export default defineComponent({
     const { visible, modelValue } = toRefs(props);
     const [isShow, setStatusValue] = useVModel(visible, modelValue, props.defaultVisible);
     function handleScrolling() {
-      if (!props?.marquee || (props?.marquee as DrawMarquee)?.loop === 0) {
+      if (!props?.marquee || (isObject(props?.marquee) && (props?.marquee as NoticeBarMarquee))?.loop === 0) {
         return;
       }
       // 初始化动画参数
       if (typeof props.marquee === 'boolean') {
         state.scroll = { ...state.scroll, marquee: props.marquee };
       }
-      const marquee = props.marquee as DrawMarquee;
-      state.scroll = {
-        marquee: true,
-        loop: typeof marquee?.loop === 'undefined' ? state.scroll.loop : marquee.loop,
-        speed: marquee.speed ?? state.scroll.speed,
-        delay: marquee.delay ?? state.scroll.delay,
-      };
+      if (isObject(props.marquee)) {
+        const marquee = props.marquee as NoticeBarMarquee;
+        state.scroll = {
+          marquee: true,
+          loop: typeof marquee?.loop === 'undefined' ? state.scroll.loop : marquee.loop,
+          speed: marquee.speed ?? state.scroll.speed,
+          delay: marquee.delay ?? state.scroll.delay,
+        };
+      }
+
       // 设置动画
       setTimeout(() => {
         const listDOMWidth = listDOM.value?.getBoundingClientRect().width;
@@ -141,7 +133,7 @@ export default defineComponent({
           const prefixIconContent = renderTNodeJSX('prefixIcon', { defaultNode: iconDefault[props.theme || 'info'] });
           if (props.prefixIcon && prefixIconContent) {
             return (
-              <div class={`${name}__prefix-icon`} onClick={() => handleClick('prefix-icon')}>
+              <div class={`${noticeBarClass.value}__prefix-icon`} onClick={() => handleClick('prefix-icon')}>
                 {prefixIconContent}
               </div>
             );
@@ -163,7 +155,7 @@ export default defineComponent({
             }
             return (
               <span
-                class={`${name}__operation`}
+                class={`${noticeBarClass.value}__operation`}
                 onClick={(event) => {
                   event.stopPropagation();
                   handleClick('operation');
@@ -174,28 +166,31 @@ export default defineComponent({
             );
           };
           return (
-            <div ref={listDOM} class={`${name}__content-wrap`} onClick={() => handleClick('content')}>
+            <div ref={listDOM} class={`${noticeBarClass.value}__content-wrap`} onClick={() => handleClick('content')}>
               {props.direction === 'vertical' && isArray(props.content) ? (
                 <div>
-                  <t-swiper
+                  <TSwiper
                     autoplay
                     loop
                     direction="vertical"
                     duration={2000}
                     height={22}
-                    class={`${name}__content--vertical`}
+                    class={`${noticeBarClass.value}__content--vertical`}
                   >
                     {props.content.map((item, index) => (
-                      <t-swiper-item key={index}>
-                        <div class={`${name}__content--vertical-item`}>{item}</div>
-                      </t-swiper-item>
+                      <TSwiperItem key={index}>
+                        <div class={`${noticeBarClass.value}__content--vertical-item`}>{item}</div>
+                      </TSwiperItem>
                     ))}
-                  </t-swiper>
+                  </TSwiper>
                 </div>
               ) : (
                 <div
                   ref={itemDOM}
-                  class={[`${name}__content`, !state.scroll.marquee ? `${name}__content-wrapable` : '']}
+                  class={[
+                    `${noticeBarClass.value}__content`,
+                    !state.scroll.marquee ? `${noticeBarClass.value}__content-wrapable` : '',
+                  ]}
                   style={state.scroll.marquee ? animateStyle.value : ''}
                   onTransitionend={handleTransitionend}
                 >
@@ -212,7 +207,7 @@ export default defineComponent({
             return null;
           }
           return (
-            <div class={`${name}__suffix-icon`} onClick={() => handleClick('suffix-icon')}>
+            <div class={`${noticeBarClass.value}__suffix-icon`} onClick={() => handleClick('suffix-icon')}>
               {suffixIconContent}
             </div>
           );
diff --git a/src/notice-bar/props.ts b/src/notice-bar/props.ts
index fba26d89e..86c38c51e 100644
--- a/src/notice-bar/props.ts
+++ b/src/notice-bar/props.ts
@@ -30,7 +30,7 @@ export default {
   operation: {
     type: [String, Function] as PropType<TdNoticeBarProps['operation']>,
   },
-  /** 前缀图标 */
+  /** 用于自定义公告栏前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标 */
   prefixIcon: {
     type: [Boolean, Function] as PropType<TdNoticeBarProps['prefixIcon']>,
     default: true,
diff --git a/src/notice-bar/type.ts b/src/notice-bar/type.ts
index b99f4f0f7..9ccb51d8b 100644
--- a/src/notice-bar/type.ts
+++ b/src/notice-bar/type.ts
@@ -20,15 +20,16 @@ export interface TdNoticeBarProps {
    * 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放
    * @default false
    */
-  marquee?: boolean | DrawMarquee;
+  marquee?: boolean | NoticeBarMarquee;
   /**
    * 右侧额外信息
    */
   operation?: string | TNode;
   /**
-   * 前缀图标
+   * 用于自定义公告栏前面的图标，优先级大于 theme 设定的图标。值为 false 则不显示图标，值为 true 显示 theme 设定图标
+   * @default true
    */
-  prefixIcon?: TNode | Boolean;
+  prefixIcon?: Boolean | TNode;
   /**
    * 后缀图标
    */
@@ -59,7 +60,7 @@ export interface TdNoticeBarProps {
   onClick?: (trigger: NoticeBarTrigger) => void;
 }
 
-export interface DrawMarquee {
+export interface NoticeBarMarquee {
   speed?: number;
   loop?: number;
   delay?: number;