Tag 标签

用于标记和选择。

基础用法

TIP

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

<ay-tag>标签一</ay-tag>
<ay-tag type="success">标签二</ay-tag>
<ay-tag type="info">标签三</ay-tag>
<ay-tag type="warning">标签四</ay-tag>
<ay-tag type="danger">标签五</ay-tag>

可移除标签

TIP

设置closable属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置disable-transitions属性，它接受一个Boolean，true 为关闭。

<ay-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
  {{ tag.name }}
</ay-tag>

不同尺寸

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

TIP

额外的尺寸：medium、small、mini，通过设置size属性来配置它们。

<ay-tag closable>默认标签</ay-tag>
<ay-tag size="medium" closable>中等标签</ay-tag>
<ay-tag size="small" closable>小型标签</ay-tag>
<ay-tag size="mini" closable>超小标签</ay-tag>

Attributes

参数	说明	类型	可选值	默认值
type	类型	string	success/info/warning/danger	—
closable	是否可关闭	boolean	—	false
disable-transitions	是否禁用渐变动画	boolean	—	false
hit	是否有边框描边	boolean	—	false
color	背景色	string	—	—
size	尺寸	string	medium / small / mini	—
effect	主题	string	dark / light / plain	light

Events

事件名称	说明	回调参数
click	点击 Tag 时触发的事件	—
close	关闭 Tag 时触发的事件	—