Buoy浮标组件

2024-06-19 10:13:34首发，5小时前更新

buoy浮标通常用来存放小型的统计数据，虽然体型娇小，但是value、label、icon、arrow、tips等元素一个不落，主打一个麻雀虽小五脏俱全。

前言

有别于badge徽章、tag标签和sign标记，buoy浮标是结合了指示+数据统计的功能。使用ax-buoy自定义标签即可表示一个普通的浮标，可通过value属性设置值，或直接将文本写在标签内；使用label属性可设置浮标文本。

颜色主题

通过theme属性修改浮标的主题颜色，可使用的主题色有：prim,error,succ,info,warn,issue,text,brief。

使用图标

通过icon属性设置图标的样式类，可以在浮标头部增加一个图标。

Attributes属性

attributes属性是标签明面的属性，自定义标签的明面属性就像原生A标签的href和target那样，可直接通过setAttribute、getAttribute和removeAttribute方法进行读写操作。

特别的，对attributes使用setAttribute和removeAttribute操作可能会重组标签的内部HTML结构。

名称	可选值	默认值	说明
label	''/undefined	undefined	浮标的文本
value	''/undefined	undefined	浮标的值
theme	'prim'/'succ'/'error'/'info'/'warn'/'issue'/'text'/'brief'	-	浮标的颜色主题
icon	''	undefined	浮标的图标样式类
size	'sm'/'md'/'lg'	'md'	浮标的尺寸
arrow	''/undefined	undefined	浮标是否使用arrow指示箭头，
inverted	''/undefined	undefined	是否将label和value的位置对调

Methods方法

有组件通用的内置方法：

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

基本用法：CompElem.reset();

Events事件

有组件通用的事件：

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

基本用法：CompElem.on('connected',()=>{console.log('connected')});