Message 消息通知
基础消息通知
用于轻量级反馈或提示，不会打断用户操作。
不同状态的消息通知
消息通知类型为普通（info）、警示（warning）、成功（success）、错误（error），用 API
Message Props
| name | type | default | description | required |
|---|---|---|---|---|
| className | String | - | className of component | N |
| style | Object | - | CSS(Cascading Style Sheets)，Typescript：React.CSSProperties |
N |
| align | String | left | options: left/center。Typescript：MessageAlignType type MessageAlignType = 'left' | 'center'。see more ts definition |
N |
| closeBtn | TNode | - | Typescript：string | boolean | TNode。see more ts definition |
N |
| content | TNode | - | Typescript：string | TNode。see more ts definition |
N |
| duration | Number | 3000 | - | N |
| icon | TNode | true | Typescript：boolean | TNode。see more ts definition |
N |
| link | TNode | - | Typescript：string | object | TNode。see more ts definition |
N |
| marquee | Boolean / Object | false | Typescript：boolean | MessageMarquee interface MessageMarquee { speed?: number; loop?: number; delay?: number }。see more ts definition |
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 |
N |
| visible | Boolean | false | - | N |
| defaultVisible | Boolean | false | uncontrolled property | N |
| zIndex | Number | - | - | N |
| onChange | Function | Typescript：(visible: boolean) => voiddeprecated |
N | |
| onClose | Function | Typescript：(context: { trigger: 'close-click' | 'duration-end', e?: MouseEvent }) => voiddeprecated。close message event。Typescript：string | TNode。see more ts definition |
N | |
| onCloseBtnClick | Function | Typescript：(context: { e: MouseEvent }) => void |
N | |
| onClosed | Function | Typescript：() => voiddeprecated |
N | |
| onDurationEnd | Function | Typescript：() => void |
N | |
| onLinkClick | Function | Typescript：(context: { e: MouseEvent }) => void |
N | |
| onOpen | Function | Typescript：() => voiddeprecated |
N | |
| onOpened | Function | Typescript：() => voiddeprecated |
N |
何时使用
当需要对用户进行较轻量的反馈或提示，可以自动消失或通过点击关闭，通常由用户触发。
与页面布局相关
通知通常出现在页面顶部，叠加在页面的上层，可在一段时间后自动消失、或用户点击关闭。
推荐/慎用示例
当需要在通知栏中展示按钮时，不建议超过1个。若需要使用更多按钮，建议使用其它交互方式。
消息通知是一种相对轻量、短时的反馈方式，尽量避免在页面中同时堆叠多个消息通知，用户可能会来不及关注它们。
相似组件
| 组件名 | 何时使用 |
|---|---|
| 轻提示 | 当需要对用户进行轻量反馈或提示，且不需要用户进行操作时使用，轻提示会在一段时间后自动消失。 |
| 公告栏 | 当需要对用户进行较明显的反馈或提示，需要用户关注时使用，一段时间后不会自动消失，通常是自动触发。 |
Vue 2
Vue 3
React
Flutter
Design
MiniProgram
WeCom Group
Welcome to contact us
