---
url: /components/tag.md
---
# Tag 标签

用于标记与分类的小标签：五种类型搭配 plain / light / dark 三种效果，支持自定义颜色、圆角、hit 边框与可关闭。整体可点击并 emit `click`，关闭图标点击会阻止冒泡并 emit `close`。

## 基础用法

`type` 决定语义色（默认 info），`effect` 决定填充方式：plain 透明底描边（默认）、light 浅色底、dark 实色底白字。

## 尺寸与形态

`size` 提供 small（默认，20px 高）/ default（24px）/ large（32px）三档；`round` 全圆角，`hit` 让边框加深为文字色，`closable` 显示关闭图标并 emit `close` 事件（组件本身不移除节点，删除逻辑由业务侧处理）。

## 自定义颜色

`color` 传入任意颜色即可覆盖主题配色：plain 效果下仅描边与文字着色（背景透明），light / dark 效果下填充该色（dark 下文字为白色）。

## 动态编辑标签

典型的标签管理场景：`closable` 加 `@close` 从数组移除，输入框加按钮向数组追加，`v-for` 渲染即可，组件不维护内部状态。

## 点击选中

标签整体可点击（emit `click`），结合动态 `type` / `effect` 可实现单选筛选器之类的轻交互。

## API