Tag 标签

基本使用

light

标签

dark

标签

outline

标签

light-outline

标签

查看代码

vue

<template>
  <gi-card bordered title="基本使用">
    <el-space direction="vertical" alignment="normal" style="width: 100%">
      <el-space wrap>
        <GiTag>light</GiTag>
        <GiTag color="primary" closable @close="onClose">标签</GiTag>
        <GiTag color="success" closable @close="onClose">标签</GiTag>
        <GiTag color="warning">标签</GiTag>
        <GiTag color="danger" closable>标签</GiTag>
      </el-space>
      <el-space wrap>
        <GiTag type="dark">dark</GiTag>
        <GiTag type="dark" color="primary" closable @close="onClose">标签</GiTag>
        <GiTag type="dark" color="success" closable @close="onClose">标签</GiTag>
        <GiTag type="dark" color="warning">标签</GiTag>
        <GiTag type="dark" color="danger" closable>标签</GiTag>
      </el-space>
      <el-space wrap>
        <GiTag type="outline">outline</GiTag>
        <GiTag type="outline" color="primary" closable @close="onClose">标签</GiTag>
        <GiTag type="outline" color="success" closable @close="onClose">标签</GiTag>
        <GiTag type="outline" color="warning">标签</GiTag>
        <GiTag type="outline" color="danger" closable>标签</GiTag>
      </el-space>
      <el-space wrap>
        <GiTag type="light-outline">light-outline</GiTag>
        <GiTag type="light-outline" color="primary" closable @close="onClose">标签</GiTag>
        <GiTag type="light-outline" color="success" closable @close="onClose">标签</GiTag>
        <GiTag type="light-outline" color="warning">标签</GiTag>
        <GiTag type="light-outline" color="danger" closable>标签</GiTag>
      </el-space>
    </el-space>
  </gi-card>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'

function onClose() {
  ElMessage.success('点击了关闭图标')
}
</script>

不同尺寸

small

default

large

小尺寸

默认尺寸

大尺寸

小尺寸

默认尺寸

大尺寸

small

default

large

查看代码

vue

<template>
  <gi-card bordered title="不同尺寸">
    <el-space direction="vertical" alignment="normal" style="width: 100%">
      <el-space wrap>
        <GiTag size="small" closable>small</GiTag>
        <GiTag size="default" closable>default</GiTag>
        <GiTag size="large" closable>large</GiTag>
      </el-space>
      <el-space wrap>
        <GiTag type="dark" size="small" closable>小尺寸</GiTag>
        <GiTag type="dark" size="default" closable>默认尺寸</GiTag>
        <GiTag type="dark" size="large" closable>大尺寸</GiTag>
      </el-space>
      <el-space wrap>
        <GiTag type="light-outline" size="small" closable>小尺寸</GiTag>
        <GiTag type="light-outline" size="default" closable>默认尺寸</GiTag>
        <GiTag type="light-outline" size="large" closable>大尺寸</GiTag>
      </el-space>
      <el-space wrap>
        <GiTag size="small" color="red" closable @close="onClose">small</GiTag>
        <GiTag size="default" color="red" closable @close="onClose">default</GiTag>
        <GiTag size="large" color="red" closable @close="onClose">large</GiTag>
      </el-space>
    </el-space>
  </gi-card>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'

function onClose() {
  ElMessage.success('点击了关闭图标')
}
</script>

基础颜色

red

orangered

orange

gold

lime

green

cyan

blue

purple

pink

gray

red

orangered

orange

gold

lime

green

cyan

blue

purple

pink

gray

red

orangered

orange

gold

lime

green

cyan

blue

purple

pink

gray

red

orangered

orange

gold

lime

green

cyan

blue

purple

pink

gray

查看代码

vue

<template>
  <gi-card bordered title="基础颜色">
    <el-space direction="vertical" alignment="normal" style="width: 100%">
      <el-space wrap>
        <GiTag color="red" closable @close="onClose">red</GiTag>
        <GiTag color="orangered">orangered</GiTag>
        <GiTag color="orange">orange</GiTag>
        <GiTag color="gold">gold</GiTag>
        <GiTag color="lime">lime</GiTag>
        <GiTag color="green">green</GiTag>
        <GiTag color="cyan">cyan</GiTag>
        <GiTag color="blue">blue</GiTag>
        <GiTag color="purple">purple</GiTag>
        <GiTag color="pink">pink</GiTag>
        <GiTag color="gray">gray</GiTag>
      </el-space>
      <el-space wrap>
        <GiTag type="dark" color="red" closable @close="onClose">red</GiTag>
        <GiTag type="dark" color="orangered">orangered</GiTag>
        <GiTag type="dark" color="orange">orange</GiTag>
        <GiTag type="dark" color="gold">gold</GiTag>
        <GiTag type="dark" color="lime">lime</GiTag>
        <GiTag type="dark" color="green">green</GiTag>
        <GiTag type="dark" color="cyan">cyan</GiTag>
        <GiTag type="dark" color="blue">blue</GiTag>
        <GiTag type="dark" color="purple">purple</GiTag>
        <GiTag type="dark" color="pink">pink</GiTag>
        <GiTag type="dark" color="gray">gray</GiTag>
      </el-space>
      <el-space wrap>
        <GiTag type="outline" color="red" closable @close="onClose">red</GiTag>
        <GiTag type="outline" color="orangered">orangered</GiTag>
        <GiTag type="outline" color="orange">orange</GiTag>
        <GiTag type="outline" color="gold">gold</GiTag>
        <GiTag type="outline" color="lime">lime</GiTag>
        <GiTag type="outline" color="green">green</GiTag>
        <GiTag type="outline" color="cyan">cyan</GiTag>
        <GiTag type="outline" color="blue">blue</GiTag>
        <GiTag type="outline" color="purple">purple</GiTag>
        <GiTag type="outline" color="pink">pink</GiTag>
        <GiTag type="outline" color="gray">gray</GiTag>
      </el-space>
      <el-space wrap>
        <GiTag type="light-outline" color="red" closable @close="onClose">red</GiTag>
        <GiTag type="light-outline" color="orangered">orangered</GiTag>
        <GiTag type="light-outline" color="orange">orange</GiTag>
        <GiTag type="light-outline" color="gold">gold</GiTag>
        <GiTag type="light-outline" color="lime">lime</GiTag>
        <GiTag type="light-outline" color="green">green</GiTag>
        <GiTag type="light-outline" color="cyan">cyan</GiTag>
        <GiTag type="light-outline" color="blue">blue</GiTag>
        <GiTag type="light-outline" color="purple">purple</GiTag>
        <GiTag type="light-outline" color="pink">pink</GiTag>
        <GiTag type="light-outline" color="gray">gray</GiTag>
      </el-space>
    </el-space>
  </gi-card>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'

function onClose() {
  ElMessage.success('点击了关闭图标')
}
</script>

自定义颜色

#4E6EF2

#1BA035

#AB57E3

#FF6C9D

#0fc6c2

#4E6EF2

#1BA035

#AB57E3

#FF6C9D

#0fc6c2

#4E6EF2

#1BA035

#AB57E3

#FF6C9D

#0fc6c2

#4E6EF2

#1BA035

#AB57E3

#FF6C9D

#0fc6c2

查看代码

vue

<template>
  <gi-card bordered title="自定义颜色">
    <el-space direction="vertical" alignment="normal" style="width: 100%">
      <el-space wrap>
        <GiTag color="#4E6EF2" closable @close="onClose">#4E6EF2</GiTag>
        <GiTag color="#1BA035">#1BA035</GiTag>
        <GiTag color="#AB57E3">#AB57E3</GiTag>
        <GiTag color="#FF6C9D">#FF6C9D</GiTag>
        <GiTag color="#0fc6c2">#0fc6c2</GiTag>
      </el-space>
      <el-space wrap>
        <GiTag type="dark" color="#4E6EF2" closable @close="onClose">#4E6EF2</GiTag>
        <GiTag type="dark" color="#1BA035">#1BA035</GiTag>
        <GiTag type="dark" color="#AB57E3">#AB57E3</GiTag>
        <GiTag type="dark" color="#FF6C9D">#FF6C9D</GiTag>
        <GiTag type="dark" color="#0fc6c2">#0fc6c2</GiTag>
      </el-space>
      <el-space wrap>
        <GiTag type="outline" color="#4E6EF2" closable @close="onClose">#4E6EF2</GiTag>
        <GiTag type="outline" color="#1BA035">#1BA035</GiTag>
        <GiTag type="outline" color="#AB57E3">#AB57E3</GiTag>
        <GiTag type="outline" color="#FF6C9D">#FF6C9D</GiTag>
        <GiTag type="outline" color="#0fc6c2">#0fc6c2</GiTag>
      </el-space>
      <el-space wrap>
        <GiTag type="light-outline" color="#4E6EF2" closable @close="onClose">#4E6EF2</GiTag>
        <GiTag type="light-outline" color="#1BA035">#1BA035</GiTag>
        <GiTag type="light-outline" color="#AB57E3">#AB57E3</GiTag>
        <GiTag type="light-outline" color="#FF6C9D">#FF6C9D</GiTag>
        <GiTag type="light-outline" color="#0fc6c2">#0fc6c2</GiTag>
      </el-space>
    </el-space>
  </gi-card>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'

function onClose() {
  ElMessage.success('点击了关闭图标')
}
</script>

图标（属性 / 插槽）

图标

icon 属性

icon + 可关闭

用户

已完成

注意

小号

大号

查看代码

vue

<template>
  <gi-card bordered title="图标">
    <el-space direction="vertical" alignment="normal" style="width: 100%">
      <el-space wrap>
        <GiTag :icon="User">icon 属性</GiTag>
        <GiTag :icon="CircleCheck" color="success" closable @close="onClose">icon + 可关闭</GiTag>
      </el-space>
      <el-space wrap>
        <GiTag color="primary">
          <template #icon>
            <ElIcon>
              <User />
            </ElIcon>
          </template>
          用户
        </GiTag>
        <GiTag color="success" closable @close="onClose">
          <template #icon>
            <ElIcon>
              <CircleCheck />
            </ElIcon>
          </template>
          已完成
        </GiTag>
        <GiTag type="dark" color="primary">
          <template #icon>
            <ElIcon>
              <Warning />
            </ElIcon>
          </template>
          注意
        </GiTag>
      </el-space>
      <el-space wrap>
        <GiTag type="outline" size="small" color="warning">
          <template #icon>
            <ElIcon>
              <Star />
            </ElIcon>
          </template>
          小号
        </GiTag>
        <GiTag type="light-outline" size="large" color="danger">
          <template #icon>
            <ElIcon>
              <Star />
            </ElIcon>
          </template>
          大号
        </GiTag>
      </el-space>
    </el-space>
  </gi-card>
</template>

<script setup lang="ts">
import { CircleCheck, Star, User, Warning } from '@element-plus/icons-vue'
import { ElIcon, ElMessage } from 'element-plus'

function onClose() {
  ElMessage.success('点击了关闭图标')
}
</script>

API

Props

属性	说明	类型	默认值
type	标签类型	`light` \| `dark` \| `outline` \| `light-outline`	`light`
color	颜色：主题色（与 Element 一致）或调色板预设名或任意 CSS 颜色字符串	`primary` \| `success` \| `warning` \| `danger` \| `info` \| 调色板名 \| `string`	`primary`
size	尺寸	`small` \| `default` \| `large`	`default`
icon	左侧图标组件（如 Element Plus Icons）；与 `#icon` 插槽并存时以插槽为准	`Component`	—
round	是否为胶囊圆角（大圆角）	`boolean`	`false`
closable	是否显示关闭按钮	`boolean`	`false`

Events

事件名	说明	参数
click	点击标签时触发	—
close	点击关闭按钮时触发	—

Slots

插槽名	说明
default	标签内容
icon	标签左侧图标（有内容时才渲染占位）

Tag 标签 ​

基本使用 ​

不同尺寸 ​

基础颜色 ​

自定义颜色 ​

图标（属性 / 插槽） ​

API ​

Props ​

Events ​

Slots ​

Tag 标签

基本使用

不同尺寸

基础颜色

自定义颜色

图标（属性 / 插槽）

API

Props

Events

Slots