主题
Tag 标签
使用
用于标记和选择。
基础用法
由 type
属性来选择 tag
的类型。 也可以通过 color
属性来自定义背景色。
可移除标签
设置 closable
属性可以定义一个标签是否可移除。 它接受一个 Boolean
。 默认的标签移除时会附带渐变动画。 如果不想使用,可以设置 disable-transitions
属性,它接受一个 Boolean
,true
为关闭。 当 Tag
被移除时会触发 close
事件。
动态编辑标签
动态编辑标签可以通过点击标签关闭按钮后触发的 close
事件来实现。
不同尺寸
Tag
组件提供除了默认值以外的三种尺寸,可以在不同场景下选择合适的按钮尺寸。
使用 size
属性来设置额外尺寸, 可选值包括 large
, default
或 small
.
圆形标签
Tag
可以向按钮组件一样变为完全圆形。
可选中的标签
有时候因为业务需求,我们可能会需要用到类似复选框的标签,但是按钮式的复选框的样式又不满足需求,此时我们就可以用到 check-tag
组件。
check-tag
的基础使用方法,check-tag
提供的 API 非常简单。
自定义颜色标签
color
可以自定义标签的颜色,可以是十六进制颜色值,也可以是 CSS 颜色名。
标签主题
effect
属性可以设置标签的主题,目前提供了 light
、 dark
和 plain
三种主题,默认为 dark
,支持与 color
属性一起使用。
点型标签
point
属性可以设置标签的形状为点型。
API
Tag Props
参数名 | 描述 | 类型 | 默认值 |
---|---|---|---|
type | 标签类型 | enum | - |
text | 悬浮窗提示文字 | string | - |
closeable | 是否可关闭 | boolean | false |
disable-transitions | 是否禁用渐变动画 | boolean | false |
hit | 是否有边框描边 | boolean | false |
color | 标签背景颜色 | string | - |
size | 标签大小 | enum | base |
point | 是否使用圆点标签 | boolean | false |
round | 是否使用圆角标签 | boolean | false |
show-overflow | 文字溢出时是否显示省略号 | boolean | false |
text-color | 标签文字颜色 | string | - |
effect | 标签主题 | enum | 'dark' |
Tag Slots
插槽名 | 描述 | 参数 |
---|---|---|
default | 默认插槽,用于放置标签内容 | - |