Tag 标签组件

标签组件，基于 Element Plus Tag 的封装组件，支持通过选项列表自动匹配标签文本。

基础用法

WTag 组件继承所有 Element Plus Tag 的属性，可以直接使用。

可关闭标签

不同尺寸

不同主题

Options + Value 用法

通过 options 和 value 属性，可以从选项列表中自动匹配对应的标签文本。

单个值匹配

数组值匹配

当 value 为数组时，会在单个标签内使用分隔符（默认 ', '）连接显示所有匹配的标签文本。

自定义分隔符

通过 separator 属性可以自定义数组值渲染时的分隔符。

插槽使用

当使用插槽时，插槽内容优先级最高，会覆盖 label 和 options + value 匹配的结果。

默认插槽

作用域插槽

插槽提供了作用域参数，可以访问当前值、匹配的标签文本和匹配到的选项对象，用于自定义渲染。

Label 属性

通过 label 属性可以直接指定标签文本，优先级高于 options + value 匹配。

字段映射

通过 props 属性可以自定义 options 中的字段名，与 Element Plus 保持一致。

宽松匹配

通过 looseMatch 属性可以控制匹配模式。默认值为 true，支持宽松匹配（数字和字符串可以互相匹配，布尔值和字符串 'true'/'false' 可以互相匹配）。

选项属性

在 options 中可以通过 tagProps 属性为每个选项配置标签属性（如 type、effect 等）。

API

属性

支持 ElTag 所有的属性。

拓展属性：

参数	说明	类型	默认值
label	标签文本（优先级高于 options + value 匹配）	string	-
options	选项列表（用于根据 value 匹配标签文本）	TagOption[]	-
value	当前值（用于从 options 中匹配对应的选项，支持单个值或数组）	TagValue | TagValue[]	-
props	字段映射配置（用于自定义 options 中的字段名）	TagFieldProps	{ label: 'label', value: 'value' }
looseMatch	是否宽松匹配（默认 true，会将布尔值和字符串 'true'/'false' 互相匹配）	boolean	true
separator	数组值渲染时的分隔符	string	', '

TagOption 配置

options 数组中每一项的配置类型。

参数	说明	类型	默认值
label	标签文本（如果使用默认字段映射）	string	-
value	标签值（如果使用默认字段映射）	unknown	-
tagProps	标签属性（传递给 ElTag 的属性）	Partial<ElTagProps>	-
[key: string]	允许其他自定义字段	any	-

TagFieldProps 配置

props 字段映射配置。

参数	说明	类型	默认值
label	标签文本字段名	string	'label'
value	标签值字段名	string	'value'

事件

支持 ElTag 所有的事件。

事件名	说明	参数
close	关闭 Tag 时触发的事件	(event: MouseEvent) => void
click	点击 Tag 时触发的事件	(event: MouseEvent) => void

插槽

插槽名	说明	参数
default	标签内容（优先级最高，会覆盖 label 和 options + value 匹配的结果）	{ value: TagValue | TagValue[], label: string | null, options: TagOption[] }

插槽参数说明：

• value: 当前值（可能是单个值或数组）
• label: 匹配到的标签文本（单个值直接返回，数组值用分隔符拼接）
• options: 所有匹配到的选项对象数组