Message 消息
消息组件用于显示全局提示信息，通常从页面顶部滑入显示。支持多种类型、自动关闭、手动关闭等功能。
基础用法
最简单的用法，显示一条信息消息。
显示代码
不同类型
消息支持多种类型，用于表示不同的语义。
显示代码
可关闭
可以添加关闭按钮，允许用户手动关闭消息。
显示代码
自定义持续时间
可以自定义消息的显示时长。
显示代码
不同位置
可以设置消息显示的位置。
显示代码
自定义图标
可以自定义消息的图标。
显示代码
消息堆叠
同一位置的多个消息会自动堆叠显示，最新的消息在上方。
显示代码
最大消息数量配置
可以配置同时显示的最大消息数量，超出时会自动关闭最旧的消息。
显示代码
全局方法
Message 提供了一些全局方法来管理消息。
显示代码
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'info' | 消息类型 |
| message | string | — | 消息内容 |
| duration | number | 3000 | 显示时长，单位毫秒。设为 0 则不会自动关闭 |
| closable | boolean | true | 是否可关闭 |
| showIcon | boolean | true | 是否显示图标 |
| icon | string | VNode | — | 自定义图标 |
| position | 'top' | 'top-left' | 'top-right' | 'top' | 消息位置 |
| offset | number | 20 | 距离顶部的偏移量 |
| dangerouslyUseHTMLString | boolean | false | 是否将 message 属性作为 HTML 片段处理 |
| customClass | string | — | 自定义类名 |
| customStyle | string | object | — | 自定义样式 |
| zIndex | number | 2000 | 层级 |
Events
| 名称 | 参数 | 说明 |
|---|---|---|
| close | — | 关闭时触发 |
| destroy | — | 销毁时触发 |
Methods
| 方法名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| VkMessage | 显示消息 | (message: string) 或 (options: MessageOptions) | MessageInstance |
| VkMessage.success | 显示成功消息 | (message: string) 或 (options: MessageOptions) | MessageInstance |
| VkMessage.warning | 显示警告消息 | (message: string) 或 (options: MessageOptions) | MessageInstance |
| VkMessage.info | 显示信息消息 | (message: string) 或 (options: MessageOptions) | MessageInstance |
| VkMessage.error | 显示错误消息 | (message: string) 或 (options: MessageOptions) | MessageInstance |
| VkMessage.danger | 显示危险消息 | (message: string) 或 (options: MessageOptions) | MessageInstance |
| VkMessage.primary | 显示主要消息 | (message: string) 或 (options: MessageOptions) | MessageInstance |
| VkMessage.close | 关闭指定消息 | (id: string) | — |
| VkMessage.closeAll | 关闭所有消息 | — | — |
| VkMessage.getInstance | 获取指定消息实例 | (id: string) | MessageInstance | undefined |
| VkMessage.getAllInstances | 获取所有消息实例 | — | MessageInstance[] |
| VkMessage.getCount | 获取消息数量 | — | number |
| VkMessage.getCountByPosition | 获取指定位置的消息数量 | (position: string) | number |
| VkMessage.setMaxCount | 设置最大消息数量 | (count: number) | — |
| VkMessage.getMaxCount | 获取最大消息数量 | — | number |
| VkMessage.setMessageGap | 设置消息间距 | (gap: number) | — |
| VkMessage.getMessageGap | 获取消息间距 | — | number |
MessageInstance
| 属性/方法 | 说明 | 类型 |
|---|---|---|
| id | 消息唯一标识 | string |
| close | 关闭消息 | () => void |