简介

标签组件用于对事物进行标记、属性状态标识、分类等。支持多种主题、尺寸、形态，可自定义 icon、可关闭、可禁用。

使用方法

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

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

若需使用长按气泡功能，页面还需注册 dialog-center 组件，并在页面 wxml 中放置 <dialog-center />：

"usingComponents": {
  "fs-tag": "ava-ui/fxui/fs-tag/index",
  "dialog-center": "ava-ui/fxui/DialogCenter/DialogCenter"
}

<!-- 页面 wxml 底部放置，供气泡弹窗渲染使用 -->
<dialog-center />

代码演示

主题（theme + variant 组合）

下表展示了所有主题（gray/blue/green/red/orange/magenta）和四种形态（dark/light/outline/light-outline）的组合效果，完全贴合设计规范：

• dark：深色背景+白字，强调标签内容。
• light：浅色背景+主题色字，适合弱化但需区分的标签。
• outline：主题色描边、透明背景、主题色文字，适合强调边界。
• light-outline：主题色浅描边、浅色背景、主题色文字，适合弱化但需区分的标签。

类型与形态（variant 属性）

尺寸

自定义样式（customStyle）

可通过 customStyle 属性传递内联样式，快速自定义标签的背景、颜色、边框、圆角等。

形状

图标（icon 属性）

可关闭

关闭按钮icon可通过closeIcon属性自定义，默认值为'guanbi2'，可用iconfont字体库中的图标名。

禁用

长按弹出气泡（bubbleOption）

设置 bubbleOption 属性（不为 null）后，长按标签可弹出气泡。气泡内容默认取标签的 text 属性值，也可通过 bubbleOption.content 覆盖。

前置条件：页面需注册 dialog-center 组件并放置 <dialog-center />，详见上方使用方法说明。

API

参数

参数	说明	类型	可选值	默认值
theme	主题色	string	default/gray/blue/green /red/orange/magenta/yellow-green	'default'（主题色，推荐使用）
variant	形态	string	dark/light/outline/light-outline	'dark'
size	尺寸	string	medium/large	'medium'
shape	形状	string	square/round/mark	'round'
closable	是否可关闭	boolean	—	false
closeIcon	关闭按钮icon	string	fxui/common_css/iconfont图标名	'guanbi2'
disabled	是否禁用	boolean	—	false
icon	图标	string	—	—
text	文本内容	string	—	''
customStyle	自定义样式	string	—	''
maxWidth	标签最大宽度	string	支持px、em、rem、百分比等。为空或小于等于0时不生效。	'240px'
bubbleOption	长按气泡配置，null 时不启用。透传给 fsBubbleDialog.show()，content 默认取 text 属性值，selector 由组件自动注入，无需手动传入。	object/null	—	null

说明：theme 支持 default（主题色，推荐使用）、gray、blue、green、red、orange、magenta、yellow-green。default 为默认主题，色值与品牌主色保持一致，适合大多数场景。

Slot

名称	说明
icon	自定义图标内容

事件

事件名	说明	回调参数
click	点击标签时触发	event
close	点击关闭时触发	event
longpress	长按标签时触发（bubbleOption 不为 null）	event
bubbletap	点击气泡列表项时触发	{ item } 同 fsBubbleDialog
bubbleclose	气泡关闭时触发	—

图标说明

• icon 属性可用 fxui/common_css/iconfont 字体库中的图标名，如 star、guanbi2、jinbi、shoukuan、chexiao、shoucang、delete、like、sousuo 等。
• 关闭按钮默认使用 guanbi2 图标（<text class="fxui_all guanbi2"></text>）。
• 也可通过 slot 自定义 icon。

打开预览