Skip to content
Theme color
Gray color
AppearanceSizeSmall(1)Medium(2)Large(3)Radius
none
small
medium
large
full
Scale90%95%100%105%110%

基本使用

  • l-message元素是一个消息容器,你需要自行将其渲染到某个地方,并通过该元素的方法来创建或关闭消息。每一条消息为一个Callout,其支持Callout的所有属性,因此messagedescription均支持自定义渲染,通过variant也可以设置消息的主题变体
ts
type MessageExpose = {
  open(config?: MessageOpenConfig): void;
  close(key: string | number): void;
  closeAll(): void;
};

type MessageOpenConfig = {
  key?: string | number;
  type?: Status;
  duration?: number | string;
  resetDurationOnHover?: boolean;
} & CalloutProps &
  MessageEvents &
  HTMLAttributes;
  • l-message本身的属性会作为公共属性,在打开消息时与传入的设置合并。

不同位置

静态方法

Message有静态方法open,方便在 js 中直接创建并展示消息,其相当于创建一个l-message元素并添加到页面中,创建后会保持复用,你可以通过getContainer指定创建位置(默认为第一个theme-provider或 body 下)

另有四个静态方法success, error, warning, info,它们用于创建指定类型的消息(相当于 open 方法 指定 type),同时它们可以直接传递字符串,更方便调用

实现方式

通过type属性指定 Message 实现方式, 目前支持以下方式:

  • popover: 默认值,会使用原生 Popover API 去实现
  • normal: 当前位置渲染,使用 fixed 定位,会受父元素影响
  • teleport: 将弹出内容渲染到teleport-holder(默认在第一个theme-provider下)并使用 fixed 定位,此时主题的继承可能不符合预期,通过to属性可调整渲染位置

需要注意的是,若浏览器不支持 Popover,手动指定的 type 会被无视,将采用备选方案实现

检测到当前浏览器不支持 Popover API

自动关闭

通过 duration 属性可以让消息在指定时间后自动关闭,单位为毫秒,不指定(undefined)则默认为 3000(3 秒),若为null或字符串none,则不会自动关闭,小于等于 0 或其他非法值会使其打开后立即关闭

resetDurationOnHover 属性可以使得鼠标移入时移除计时器,移出后重新计时,默认为 true