标签 Tag

基本用法

标签的基本用法

带边框的标签

通过参数 bordered，可以显示带边框的标签。

可选中

通过设置 checkable ，可以实现点击选中的效果。

可关闭标签

通过 closable 属性控制标签是否可关闭。可关闭标签可通过 close 事件执行一些关闭后操作，也可通过 visible 属性控制标签的显示或隐藏。

标签的颜色

我们提供多种预设色彩的标签样式，通过 color 设置不同颜色。如果预设值不能满足你的需求，color 字段也可以设置自定义色值。

自定义颜色的自动适配

使用自定义颜色（非预设色值）时，组件会根据背景色自动计算合适的文字颜色：深色背景使用白色文字，浅色背景自动生成同色系深色文字。你也可以通过 text-color 手动指定文字颜色，或通过 background-alpha 调整背景透明度。

动态编辑标签

可动态添加和删除标签。

省略内容

默认内容区域内置 sd-ellipsis，默认开启单行省略；可以通过 ellipsis 关闭，也可以通过 ellipsis-performant 切换到高性能版本。在需要多行截断时，可配合 ellipsis-line-clamp、ellipsis-expand-trigger 和 tooltip 插槽控制省略行为。

带图标的标签

可通过 icon 插槽在标签中加入图标。

加载中状态

标签的加载中状态。

标签的尺寸

标签的大小分为：small、medium、large 三种，可以在不同场景下选择合适按钮尺寸。推荐及默认尺寸为 medium。

API

<tag> Props

参数名	描述	类型	默认值	版本
color	标签的颜色	'red' | 'orangered' | 'orange' | 'gold' | 'lime' | 'green' | 'cyan' | 'blue' | 'sdblue' | 'purple' | 'pinkpurple' | 'magenta' | 'gray' | string	-
size	标签的大小	'small' | 'medium' | 'large'	'medium'
bordered	是否显示边框	boolean	false	2.33.0
text-color	自定义颜色的文字颜色，仅在自定义颜色时生效	string	-
background-alpha	自定义颜色的背景透明度，仅在自定义颜色时生效	number	0.8
visible (v-model)	标签是否可见	boolean	-
default-visible	标签默认是否可见	boolean	true
loading	标签是否为加载中状态	boolean	false
closable	标签是否可关闭	boolean	false
checkable	标签是否可选中	boolean	false
checked (v-model)	标签是否选中（标签可选中时可用）	boolean	-
default-checked	标签默认选中状态（标签可选中时可用）	boolean	true
nowrap	标签内容不换行。已废弃，建议改用 ellipsis	boolean	-	2.56.1
ellipsis	是否开启默认内容省略	boolean	true
ellipsis-line-clamp	默认内容省略的最大显示行数	number | string	-
ellipsis-expand-trigger	省略内容的展开触发方式	'click'	-
ellipsis-tooltip	省略时是否展示提示。可传入 Tooltip 属性	boolean | EllipsisTooltipProps	true
ellipsis-performant	是否使用高性能省略实现	boolean	false

<tag> Events

事件名	描述	参数
close	点击关闭按钮时触发	ev: MouseEvent | KeyboardEvent
check	用户选中时触发（仅在可选中模式下触发）	checked: boolean ev: MouseEvent

<tag> Slots

插槽名	描述	参数
icon	图标	-
close-icon	关闭按钮的图标	-
tooltip	自定义省略提示内容，仅在开启 ellipsis 时生效	-