## Tag 标签 ------------------- 用于标记和选择。 ### 基础用法设置 `closable` 属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置 `disable-transitions` 属性，它接受一个 `Boolean` ，true 为关闭。 :::demo ```html 标签一

标签二

``` ::: ### 动态编辑标签动态编辑标签可以通过点击标签关闭按钮后触发的 `close` 事件来实现 :::demo ```html {{tag}}

+ New Tag

``` ::: ### 多彩标签由 `type` 属性来选择 tag 的类型，也可以通过 `color` 属性来自定义背景色。 :::demo ```html 标签一

标签二

标签三

标签四

标签五

red

orange

gold

green

blue

black

#f50

#2db7f5

#87d068

#108ee9 ``` ::: ### 不同尺寸 Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。额外的尺寸：`medium`、`small`、`mini`，通过设置 `size` 属性来配置它们。 :::demo ```html 默认标签

中等标签

小型标签

超小标签 ``` ::: ### 可选择可以通过 `click` 事件，结合 `selectable` 属性，实现 Tag 组件的选中状态，并返回当前的选中状态值 `selected` 。 :::demo ```html 标签1

标签2

标签3

``` ::: ### 热门标签选中感兴趣的话题。 :::demo ```html

catogories:

Movie

Books

Music

Sports

``` ::: ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | type | 主题 | string | success/info/warning/danger | — | | closable | 是否可关闭 | boolean | — | false | | disable-transitions | 是否禁用渐变动画 | boolean | — | false | | hit | 是否有边框描边 | boolean | — | false | | color | 背景色，支持 colorName，rgb，hex 三种颜色类型，不带透明度的颜色 | string | — | — | | size | 尺寸 | string | medium / small / mini | — | | selectable | 是否可改变，结合click事件使用 | boolean | — | false | | selected | 是否选中 | boolean | — | false | ### Events | 事件名称 | 说明 | 回调参数 | |---------- |-------- |---------- | | close | 关闭 Tag 时触发的事件 | — | | click | 点击 Tag 时触发的事件，结合selectable使用，当selectable为false时不起作用 | 标签的选中状态值 selected |