FS-UI v0.1.33

Tag 标记

使用指南

import { Tag } from 'fs-ui'
export default {
  components: {
    fsTag: Tag
  }
}
1
2
3
4
5
6

代码演示

基本用法

通过 type 属性控制 Tag 颜色，默认为灰色

<fs-tag>标签</fs-tag>
<fs-tag type="danger">标签</fs-tag>
<fs-tag type="primary">标签</fs-tag>
<fs-tag type="success">标签</fs-tag>
<fs-tag type="warning">标签</fs-tag>
1
2
3
4
5

空心样式

设置plain属性设置为空心样式

<fs-tag plain>标签</fs-tag>
<fs-tag type="danger" plain>标签</fs-tag>
<fs-tag type="primary" plain>标签</fs-tag>
<fs-tag type="success" plain>标签</fs-tag>
<fs-tag type="warning" plain>标签</fs-tag>
1
2
3
4
5

圆角样式

通过round设置为圆角样式

<fs-tag round>标签</fs-tag>
<fs-tag type="danger" round>标签</fs-tag>
<fs-tag type="primary" round>标签</fs-tag>
<fs-tag type="success" round>标签</fs-tag>
<fs-tag type="warning" round>标签</fs-tag>
1
2
3
4
5

标记样式

通过mark设置为标记样式(半圆角)

<fs-tag mark>标签</fs-tag>
<fs-tag type="danger" mark>标签</fs-tag>
<fs-tag type="primary" mark>标签</fs-tag>
<fs-tag type="success" mark>标签</fs-tag>
<fs-tag type="warning" mark>标签</fs-tag>
1
2
3
4
5

自定义颜色

<fs-tag color="red">标签</fs-tag>
<fs-tag color="blue" plain>标签</fs-tag>
<fs-tag color="green" round>标签</fs-tag>
<fs-tag color="yellow" mark>标签</fs-tag>
<fs-tag color="black">标签</fs-tag>
1
2
3
4
5

标签大小

<fs-tag size="large">标签</fs-tag>
<fs-tag size="medium">标签</fs-tag>
<fs-tag>标签</fs-tag>
<fs-tag size="mini">标签</fs-tag>
1
2
3
4

参数

参数 说明 类型 默认值
type 类型，可选值为primary success danger warning String -
size 大小, 可选值为large medium mini String -
color 自定义标签颜色 String -
plain 是否为空心样式 Boolen -
round 是否为圆角样式 Boolen -
mark 是否为标记样式 Boolen -

事件

事件 说明 返回值
click 点击事件

插槽

插槽 说明
自定义 Tag 显示内容

← Card 卡片 →