Alarm警报闪烁组件

2024-06-19 09:01:26首发，5小时前更新

AX-ALARM警报通常用于定位显示告警事件，以显目的方式发出警示或通知；本警报组件支持显示图标、文本和图像，并支持三种光晕扩散尺寸。

简单使用

使用ax-alarm标签表示警报，默认为红点波浪。

主题

通过theme属性设置警报的颜色主题，支持：prim、error（默认）、info、warn、succ和issue。

尺寸

通过size属性设置波浪尺寸，可选值有：sm、md（默认）和lg。

使用内容

警报的宽高是1:1，而且是自适应的，宽高会随着内容的变化而变化。有几个注意事项：

1. 警报用法是用来指示警报而不是给用户传递大量的文本内容，所以警报中的文本应该是简短的。
2. 文本内容需要使用任意标签包裹，以确保不会被闪烁波浪盖住。
3. 内容越多，警报尺寸越大，波浪也越大。

可通过label属性展示若干文本，也可以将文本直接写入标签内。支持html多行文本。

其他内容

除了单纯显示若干文字之外，还支持图标（icon属性）、图片（image属性）。

因为alarm目的是在于发出警告，而不是展示内容，所以内容应该简短，另外label、icon和image三个属性应该只能选择一个显示。

Attributes属性

属性名	可选值	默认值	说明
icon	-	undefined	图标类名
image	-	undefined	图片地址
theme	'prim'/'error'/'info'/'warn'/'succ'/'issue'	'error'	主题风格
size	'sm'/'md'/'lg'	'md'	尺寸
label	-	undefined	文本

Methods方法

有组件通用的内置方法：

• set：设置组件属性，支持一个参数即被设置的属性值键值对{key，value}或其数组
• reset：重置组件属性，无参数
• clear：清除属性和值，无参数

Events事件

有组件通用的事件：

• connected：组件连接成功，无参数
• disconnected：组件断开连接，无参数
• adopted：组件被转移，无参数
• set：设置了属性，支持一个参数即设置的值
• cleared：清除了属性，无参数
• reset：重置了属性，无参数