设置UI引擎前端页面标签组组件属性

数据

标签组的数据源，需传入一个对象数组。每个对象包含以下属性：

• name：标签要显示的文本。
• type：标签的预设样式类型，不同类型对应专属视觉风格（颜色）。可选项：
  • success：成功/正常（绿色系）。
  • info：信息/常规（蓝色系）。
  • warning：警告/待处理（黄色系）。
  • danger：危险/故障（红色系）。

是

主题

统一控制标签组内所有标签的视觉效果，可选值：

• dark：深色背景，基于对应类型的主色。无类型时填充黑色背景。
• light：浅色背景，基于对应类型的主色。无类型时填充浅灰色背景。
• plain：无背景色，仅带边框，边框颜色基于对应类型的颜色。

是

尺寸

统一设置标签组内所有标签的显示大小。可选项：

• medium：中等尺寸，默认为“medium”。
• small：小尺寸。

是

元素id值

对应HTML标签的“id”属性，同一页面内必须唯一。

是

样式类

对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。

是

ref引用类

对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。

如果为“数据源表单”组件，会自动填充默认值。

是

onItemClick

(item, index, event) => void

单击标签组内单个标签时触发。

• item：当前单击标签的数据源对象（含name/type）。
• index：当前标签在数组中的索引。
• event：原生事件对象。

onClick

(e: MouseEvent) => void

浏览器原生事件，单击标签组容器范围内的任意位置都会触发。

onChange

(e: MouseEvent) => void

浏览器原生事件，元素值改变时触发。

注意：此事件对标签组组件本身通常无效。

onFocus

(e: MouseEvent) => void

浏览器原生事件，组件获取焦点时触发。

注意：此事件对标签组组件本身通常无效。

onMousemove

(e: MouseEvent) => void

浏览器原生事件，鼠标在标签组区域移动时触发。