Skip to content

Tag 标签

用于标记

基本用法

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

可移除标签

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

动态编辑

模拟动态新增删除列表

尺寸

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

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

主题

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

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

圆形标签

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

API

Attributes

参数说明类型默认值
type类型'success' | 'info' | 'warning' | 'error' | ''''
closable是否可清空booleanfalse
disable-transitions是否禁用渐变动画booleanfalse
hit是否有边框描边booleanfalse
color背景色string''
sizeTag 的尺寸'large' | 'default' | 'small' | ''''
effectTag 的主题'dark' | 'light' | 'plain'light
round是否为圆形booleanfalse

Slots

名称说明
default默认内容

Events

事件名称说明类型
click点击时触发(evt: MouseEvent) => void
close清空时触发(evt: MouseEvent) => void