Skip to content
On this page

Message 消息提示

用于主动操作后的反馈提示

基本使用

开启

自定义消息

message 属性可接收string显示文本,也可接收VNode自定义消息

限定最大宽度为500px

开启

多种类型

开启

可关闭

可以添加关闭按钮。

默认的 Message 是不可以被人工关闭的。 如果你需要手动关闭功能,你可以把 close 设置为 true

此外,Message 拥有可控的 duration, 默认的关闭时间为 2500 毫秒,当把这个属性的值设置为 0 便表示该消息不会被自动关闭。

可以传递 close-btn 属性来自定义关闭按钮,支持字符串与 icon

开启

不同位置

placement 配置项可调整不同弹出位置

开启

Attributes

参数说明类型可选值默认值
message消息文本string / VNode——false
type消息类型FightingTypedefault primary success danger warningdefault
duration显示时间,单位为毫秒。 设为 0 则不会自动关闭number——2500
round是否为圆角类型boolean——false
close是否可关闭boolean——false
icon消息 iconFightingIcon————
color字体颜色string————
placement位置MessagePlacementtop bottom top-left top-right bottom-left bottom-righttop
offset偏移距离number——20
background自定义背景色string————
close-btn关闭按钮string / FightingIcon————
z-index层级boolean——1000
on-close关闭之后的回调MessageClose————

Interface

组件导出以下类型定义:

ts
import type {
  MessageInstance,
  MessageProps,
  MessagePlacement,
  MessageClose
} from 'fighting-design'

MessagePlacement

ts
type MessagePlacement =
  | 'top'
  | 'top-left'
  | 'top-right'
  | 'bottom'
  | 'bottom-left'
  | 'bottom-right'

MessageClose

ts
type MessageClose = (evt?: MouseEvent) => void

Contributors