简介

标签组组件是多个标签的集合，支持流水布局自动换行，最多显示指定行数的标签。当标签超过最大行数时，会自动显示【更多】按钮；当标签不超过最大行数时，会显示【编辑】按钮。支持多种主题、尺寸、形态，可自定义样式。适用于分类展示、属性标识、多选等场景。

使用方法

局部引入，在需要引入的页面或组件的 index.json 中配置：

"usingComponents": {
  "fs-tag-group": "ava-ui/fxui/fs-tag-group/index"
}

代码演示

基础用法

标签组组件支持单行和多行显示，自动根据标签数量和容器宽度进行布局：

单行显示

标签数量较少时，所有标签在一行内显示，并在末尾显示【编辑】按钮：

• 适用于标签数量较少的场景
• 自动计算标签间距
• 编辑按钮使用圆形图标按钮

多行显示

标签数量较多时，自动换行显示，最多显示指定行数：

• 支持最多显示 maxLines 行标签（默认2行）
• 超过最大行数时显示【更多】按钮
• 自动计算每行可显示的标签数量

自定义最大行数

通过 maxLines 属性自定义最大显示行数：

• 支持设置任意行数
• 适用于需要更多标签展示的场景
• 超过行数时仍会显示【更多】按钮

展开模式

通过 expand 属性控制是否展开显示所有标签：

• 展开模式下显示所有标签
• 不展开模式下按最大行数显示
• 适用于需要查看所有标签的场景

禁用状态

支持设置标签组的禁用状态：

• 通过 tag_active 设置单个标签禁用
• 禁用状态下标签不可点击

API

属性

属性	说明	类型	可选值	默认值
tags	标签数组	array	—	[]
variant	形态	string	dark/light/outline/light-outline	'light-outline'
size	尺寸	string	medium/large	'medium'
shape	形状	string	square/round/mark	'round'
customStyle	自定义样式	string	—	''
gap	标签间距（px）	number	—	4
maxLines	最大行数	number	—	2
expand	是否展开	boolean	—	false
bubbleOption	气泡配置	object	—	{}
enableShowAllPopup	点击更多按钮，是否展示全部标签弹窗	boolean	—	true

尺寸规格说明

标签组组件提供两种尺寸，可以在不同场景下选择合适的尺寸。

尺寸	说明	标签高度(px)	编辑按钮尺寸(px)	使用场景
medium	中等尺寸（默认）	22	22
large	大尺寸	24	24

主题色说明

组件支持多种主题色，会自动为标签循环分配主题色：

• blue：蓝色主题
• green：绿色主题
• orange：橙色主题
• magenta：洋红色主题
• yellow-green：黄绿色主题

事件

事件名	说明	回调参数
click	点击标签时触发

数据格式

// 标签数据格式
const tagList = [
  {
    name: '标签1',           // 标签文本
    theme: 'magenta',        // 可选，单个标签的主题色
    variant: 'light-outline', // 可选，单个标签的形态
    size: 'large',           // 可选，单个标签的尺寸
    shape: 'round',          // 可选，单个标签的形状
    icon: 'star',            // 可选，单个标签的图标
    customStyle: '',         // 可选，单个标签的自定义样式
    tag_active: true,        // 可选，单个标签是否激活
    id: 'tag1'               // 可选，标签唯一标识
  },
  // ... 更多标签
]

布局逻辑

自动布局计算

1. 容器宽度计算：组件会自动获取容器宽度
2. 标签宽度计算：动态获取每个标签的实际宽度
3. 换行判断：根据容器宽度和标签间距自动判断换行
4. 可见性计算：计算在最大行数内可显示的标签数量

按钮显示逻辑

• 编辑按钮：当标签不超过最大行数时显示
• 更多按钮：当标签超过最大行数时显示，替换为标签形式
• 按钮样式：编辑按钮使用圆形图标按钮，更多按钮使用 more 图标

主题色分配

组件会自动为标签循环分配主题色，无法自定义主题色：

1. 永远使用标签自身的 theme 属性
2. 如果没有设置，则循环使用默认主题色数组：magenta、orange、yellow-green、blue

注意事项

• 确保容器有足够的宽度来正确计算布局
• 组件会自动处理标签的换行和按钮的显示/隐藏
• 编辑按钮使用圆形图标按钮，样式为 outline 形态
• 更多按钮会替换为标签形式，使用 more 图标
• 支持通过 expand 属性控制是否展开显示所有标签
• 禁用状态的标签不会触发 click 事件
• 组件内部会自动计算样式，包括尺寸、颜色、布局等
• 编辑按钮图标使用 obj-promotionobj，更多按钮图标使用 more

打开预览