Skip to content

Tag 标签

使用

用于标记和选择。

基础用法

type 属性来选择 tag 的类型。 也可以通过 color 属性来自定义背景色。

可移除标签

设置 closable 属性可以定义一个标签是否可移除。 它接受一个 Boolean。 默认的标签移除时会附带渐变动画。 如果不想使用,可以设置 disable-transitions 属性,它接受一个 Booleantrue 为关闭。 当 Tag 被移除时会触发 close 事件。

动态编辑标签

动态编辑标签可以通过点击标签关闭按钮后触发的 close 事件来实现。

不同尺寸

Tag 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的按钮尺寸。

使用 size 属性来设置额外尺寸, 可选值包括 large, defaultsmall.

圆形标签

Tag 可以向按钮组件一样变为完全圆形。

可选中的标签

有时候因为业务需求,我们可能会需要用到类似复选框的标签,但是按钮式的复选框的样式又不满足需求,此时我们就可以用到 check-tag组件。

check-tag 的基础使用方法,check-tag 提供的 API 非常简单。

自定义颜色标签

color 可以自定义标签的颜色,可以是十六进制颜色值,也可以是 CSS 颜色名。

标签主题

effect 属性可以设置标签的主题,目前提供了 lightdarkplain 三种主题,默认为 dark,支持与 color 属性一起使用。

点型标签

point 属性可以设置标签的形状为点型。

API

Tag Props

参数名描述类型默认值
type标签类型enum-
text悬浮窗提示文字string-
closeable是否可关闭booleanfalse
disable-transitions是否禁用渐变动画booleanfalse
hit是否有边框描边booleanfalse
color标签背景颜色string-
size标签大小enumbase
point是否使用圆点标签booleanfalse
round是否使用圆角标签booleanfalse
show-overflow文字溢出时是否显示省略号booleanfalse
text-color标签文字颜色string-
effect 标签主题enum'dark'

Tag Slots

插槽名描述参数
default默认插槽,用于放置标签内容-