标签 Tag
通常用来展示一些属性,偶尔也用来当一些备选的属性。
小小小标签
适用场景 需要展示当前对象状态
内容规则 文字内容根据业务需求,不做限制 标签分为高、中、低3个等级,若在界面中需要突出该对象当前状态,建议使用高等级标签类型;若在界面中不需要突出展示该对象当前状态,但需要展示则建议使用低等级标签类型;若无要求则建议使用中等级 标签颜色默认采用规定颜色,若标签运用位置有对应的底色,可在默认色值下+100
标签大小
有点东西,但东西不多
颜色随心所欲
传入字体颜色可以自动计算背景,当然两个支持自定义
图标
内置了五种图标tag
processing、error、completed、rejected、canceled
可以通过slot的icon自定义图标
弱状态标签
内置了五种tag
processing、error、completed、rejected、canceled
API
Tag Props
| 名称 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| color | string | - | - | 设置字体颜色 |
| bg-color | string | - | 默认取字体颜色并设置透明为0.15 | 设置背景颜色 |
| size | string | small | medium | large | small | 尺寸 |
| type | string | processing | canceled | completed | rejected | error | - | 类型 |
| dot | boolean | true| false | false | |
| icon | string | - | - | 图标 |
| has-prefix | boolean | true | false | false | 是否默认有尾部icon |
Tag 事件
| 名称 | 类型 | 说明 |
|---|---|---|
| clickSuffix | - | 点击头部icon事件 |
| clickPrefix | - | 点击尾部icon事件 |
Tag 插槽
| 插槽名 | 说明 | 插槽作用域 |
|---|---|---|
suffix | 头部内容icon | { color } |
prefix | 尾部内容icon | { color } |