Tag 标签
用于标记
基本用法
由 type 属性来选择 tag 的类型。 也可以通过 color 属性来自定义背景色。
可移除标签
设置 closable 属性可以定义一个标签是否可移除。 它接受一个 Boolean。 默认的标签移除时会附带渐变动画。 如果不想使用,可以设置 disable-transitions 属性,它接受一个 Boolean,true 为关闭。 当 Tag 被移除时会触发 close 事件。
动态编辑
模拟动态新增删除列表
尺寸
Tag 组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的按钮尺寸。
使用 size 属性来设置额外尺寸, 可选值包括 large, default 或 small.
主题
Tag 组件提供了三个不同的主题:dark、light 和 plain。
通过设置 effect 属性来改变主题,默认为 light。
圆形标签
Tag 可以向按钮组件一样变为完全圆形。
API
Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 类型 | 'success' | 'info' | 'warning' | 'error' | '' | '' |
| closable | 是否可清空 | boolean | false |
| disable-transitions | 是否禁用渐变动画 | boolean | false |
| hit | 是否有边框描边 | boolean | false |
| color | 背景色 | string | '' |
| size | Tag 的尺寸 | 'large' | 'default' | 'small' | '' | '' |
| effect | Tag 的主题 | 'dark' | 'light' | 'plain' | light |
| round | 是否为圆形 | boolean | false |
Slots
| 名称 | 说明 |
|---|---|
| default | 默认内容 |
Events
| 事件名称 | 说明 | 类型 |
|---|---|---|
| click | 点击时触发 | (evt: MouseEvent) => void |
| close | 清空时触发 | (evt: MouseEvent) => void |