Tag 标签

用于标记和选择。

基础用法

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

Tag 1Tag 2Tag 3Tag 4Tag 5

可移除标签

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

Tag 1Tag 2Tag 3Tag 4Tag 5

动态编辑标签

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

Tag 1Tag 2Tag 3

不同尺寸

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

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

LargeDefaultSmall

主题

Tag 组件提供了三个不同的主题:darklightplain

通过设置 effect 属性来改变主题,默认为 light

DarkTag 1Tag 2Tag 3Tag 4Tag 5
LightTag 1Tag 2Tag 3Tag 4Tag 5
PlainTag 1Tag 2Tag 3Tag 4Tag 5

圆形标签

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

Tag 1Tag 2Tag 3Tag 4Tag 5
Tag 1Tag 2Tag 3Tag 4Tag 5
Tag 1Tag 2Tag 3Tag 4Tag 5

可选中的标签

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

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

CheckedToggle meDisabled
Tag 1 Tag 2 Tag 3 Tag 4 Tag 5 Tag 6

Tag API

Tag Attributes

属性名说明类型默认
typeTag 的类型enumprimary
closable是否可关闭booleanfalse
disable-transitions是否禁用渐变动画booleanfalse
hit是否有边框描边booleanfalse
color背景色string
sizeTag 的尺寸enum
effectTag 的主题enumlight
roundTag 是否为圆形booleanfalse

Tag Events

事件名说明Type
click点击 Tag 时触发的事件Function
close关闭 Tag 时触发的事件Function

Tag Slots

名称说明
default自定义默认内容

CheckTag API

CheckTag Attributes

属性名说明类型默认
checked / v-model:checked是否选中booleanfalse
disabled 2.8.2是否禁用booleanfalse
type 2.5.4CheckTag 类型enumprimary

CheckTag Events

事件名说明类型
change点击 Check Tag 时触发的事件Function

CheckTag Slots

名称说明
default自定义默认内容

源代码

组件样式文档

贡献者