---
id: "tags"
title: "标签与角标（小红点、数字）"
category: "数据展示"
document_type: "component-specification"
spec_status: "local-current-draft"
element_ui: "2.15.6"
vue: "2.6.14"
page: "../index.html#spec-tags"
source_data: "../component-data.json"
official_components: ["tag", "badge"]
template_components: ["el-button", "el-tag"]
scenario_count: 8
verification: "scenario-checklist-not-full-test-pass"
---

# 标签与角标（小红点、数字）

专题 `tags` · 数据展示 · Element UI 2.15.6

## 适用范围与组件映射

公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。

官方条目映射：`tag`、`badge`。

本页模板直接使用的 Element UI 标签：`el-button`、`el-tag`。

## 通用基线

- 组件库：Element UI **2.15.6**；运行样例 Vue **2.6.14**。
- 系统中文字体：macOS 优先苹方，Windows 通常微软雅黑；工程顺序固定为 `"PingFang SC", "Microsoft YaHei", sans-serif`。不要求安装或加载网络字体，兼容回退不是另一套可选样式。
- 后续仅采用经验证且固定版本的兼容 Element UI 2.x；Element Plus 属于独立迁移路线。
- 正文、数据值、输入及已选值：`14px / 400 / 21px`，`#303133`。
- 表头及组件分组标题：`14px / 600 / 21px`；弹窗标题：`16px / 600 / 24px`，均使用 `#303133`。
- 辅助说明：`12px / 400 / 18px`，`#595959`；错误、链接、状态、禁用与占位按各自语义处理。
- 适用组件的默认尺寸为 `small / 32px`；不得将这一高度机械应用于表格、文本域、浮层等全部组件。
- 规范正文与场景说明使用 `14px / 400 / 24px`、`#303133`，不降成灰蓝小字。
- 筛选文本输入占位统一“请输入”；未选择下拉统一“请选择”；默认全部的下拉显示“全部”。字段标签保留业务含义；日期保留开始/结束语义。
- 次级文字操作（查看更多、编辑、详情、数据中心、更多）：`12px / 400 / 18px`，`#3377BB`；保留点击热区。
- 本规范库的深色目录、蓝色展示区属于文档排版，不是业务组件颜色或业务导航规范。

## 本页用法与分类

默认用法：条件使用标签；新动态使用小红点；明确未读数量使用数字角标。三者按含义选用，不按外观喜好互换。

| 区分什么 | 本页内容 | 选用或触发条件 |
| --- | --- | --- |
| 用途 | 已选条件、分类、新动态、未读数量 | 已选条件或分类用标签；只有“有更新”用点，需知道数量用数字。同一目标不叠点与数字。 |
| 显示规则 | 数字由真实数量产生，小红点由真实新动态产生。 | 0隐藏，1–99显示数字，超过99显示99+。未知不是0；数量失败在内容区域说明。 |
| 尺寸与位置 | 纯点8px；数字高18px、12px字；右上角独立定位。 | 尺寸均含1px白边；入口至少28px，常规32px，已有顶栏40px保留。角标不单独点击。 |
| 阅读与清除 | 进入列表、读取某条、全部已读是不同动作。 | 只在对应内容已查看或已读更新成功后清除；失败保持未读，新动态到达再出现。 |

使用边界：普通业务状态不附装饰红点，普通数量不全部做提醒角标；标签关闭不等于删除对象。

## 组件规则

- **TAGS-R01**：标签与角标是两种用途：标签表达已选条件或分类，角标附着于入口提醒新动态或未读数量；普通业务状态保留正文文字，不加装饰圆点。小红点与数字角标是同一角标组件的两种信息表达，同一目标只显示一种，不能叠加。
- **TAGS-R02**：纯小红点表示有尚未查看的新动态，不提供具体数量；默认直径8px。数字角标仅接受已知、有效的非负整数：0隐藏，1–99显示实际数字，超过99显示99+；负数、小数、空值或获取失败不得伪造为0。数量未知时隐藏数字角标，在目标区域明确加载或失败；只有另有可靠的新动态标记时才可显示小红点。
- **TAGS-R03**：数字角标总高度18px；1–9为18×18px圆形，10–99与99+按12px/400文字、左右4px内边距自然形成胶囊，最小宽18px。纯点与数字角标均使用公共提醒红 #F56C6C，数字使用白色 #FFFFFF；尺寸包含1px白色边框，数字行高16px。复用公共字体栈，不另用Arial或加粗。
- **TAGS-R04**：角标采用绝对定位，附着于入口右上角，不参与文字与图标的排版。数字入口默认32px或更大，紧凑入口至少28px；角标不单独响应点击、悬停或键盘焦点，整个入口提供操作热区。常规入口角标右上外缘与入口右上边缘对齐（top:0、right:0）；宿主必须预留空间并避免祖先裁切。同一模块不可随数字位数改变入口位置。
- **TAGS-R05**：只有入口响应悬停、按下和键盘焦点；角标本体不因操作变蓝、变大或加外圈。入口中文可访问名称说明“有新动态”或完整未读数量，即使画面显示99+也要可读取真实数量；可用悬停说明补充全数，不能只靠颜色或悬停。
- **TAGS-R06**：打开通知列表不代表全部已读。阅读某条通知并成功更新后减去这一条；明确执行全部已读并成功后清零隐藏。更新中防重复，失败保留或恢复原未读状态并提供重试说明。筛选结果条数、其中未读与全部未读分别标注，不能混成同一口径；跨筛选执行全部已读时，按钮须明确作用于全部通知。纯点在对应新动态确实被查看后消失，不能仅因鼠标经过清除。
- **TAGS-R07**：已选标签使用选中浅蓝底和操作蓝文字，关闭只取消当前条件；普通分类标签使用白底、正文深灰与边框灰，不按分类随机配色。可关闭标签必须说明取消哪一项，不可移除时不提供可执行的关闭入口；恢复只恢复当前选择。删除已保存对象另走危险操作与居中确认。
- **TAGS-R08**：本页分开演示标签、纯点和数字角标。新增、阅读、全部已读、失败重试只改变当前示例集合，不请求业务接口；边界对照用于核对0、1、9、10、99、100、未知等显示规则，不是业务可选皮肤。
- **TAGS-R09**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。
- **TAGS-R10**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。
- **TAGS-R11**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。
- **TAGS-R12**：角标的尺寸、计数与清除规则只在本专题维护。图标专题负责铃铛等图形和热区，反馈专题负责消息提示与通知内容容器；这些专题引用本页，不再另建角标规则。系统通知和下载记录沿用各自业务的读取含义，不能把新下载动态与通知未读数混成一个计数。
- **TAGS-R13**：本后台角标仅采用纯点和未读数字。官方支持字符串与多种类型色，不作为本项目默认方案；new/hot等营销字样及普通业务状态另按业务内容处理，不扩充角标配色。

## 场景与验收清单

以下为需核对的场景组；`[ ]` 不代表已经测试通过。

- [ ] **TAGS-S01**：标签取消与恢复只作用于当前项；分类、业务状态、新动态与未读数量的含义清晰。
- [ ] **TAGS-S02**：检查纯点8×8px，数字高18px且1–9为18×18px圆；10–99和99+胶囊随文字伸展，以上均包含1px白边。
- [ ] **TAGS-S03**：对照0隐藏、1、9、10、99、100→99+；非法数值及未知不伪造0；可访问名称保留完整数值。
- [ ] **TAGS-S04**：点击入口只展开列表而未读数不变；阅读单条后减一，全部已读后隐藏，再新增后恢复。纯点在对应动态被阅读后隐藏。
- [ ] **TAGS-S05**：开启模拟更新失败后阅读或全部已读，未读保持且有失败说明；关闭模拟失败可重试成功。此项仅为本地组件演示。
- [ ] **TAGS-S06**：角标不参与布局、不遮住入口图形；数字从一位变多位不挤动文字，同目标不叠数字和点；检查窄屏与裁切边界。
- [ ] **TAGS-S07**：Tab只进入完整入口和真实操作，小红点与数字不单独获焦。入口至少28px、常规32px，中文可访问名称说明新动态或完整未读数。
- [ ] **TAGS-S08**：核对页面、规范与场景、下载MD及复制文档一致；业务通知检查读取中/失败数量未知、全部服务页完整加载、筛选与全部未读口径、成功后才更新和重复操作阻断；下载记录单独检查动态已查看的含义。

### 专题验收重点

标签取消与恢复、点的查看清除、数字的0/99+边界、逐条与全部已读、失败保持及完整数量朗读均需检查。

## 当前示例模板

以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。

```html
<section class="badge-tag-section">
<h4>选择标签</h4>
<div class="demo-line">
<el-tag v-if="tagVisible" class="audit-removable-tag">已选项 A<button type="button" class="audit-tag-close" aria-label="取消选择已选项 A" @click="tagVisible=false">
<i class="el-icon-close" aria-hidden="true">
</i>
</button>
</el-tag>
<el-button v-else type="text" @click="tagVisible=true">恢复标签</el-button>
<el-tag class="badge-category-tag">普通分类</el-tag>
</div>
</section>
<badge-patterns>
</badge-patterns>
```

## 交付与使用边界

- 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。
- 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。
- 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。

## 来源与关联

- 来源线索：现有中控系统通知、下载记录与公共标签实现；本次统一角标尺寸、定位及读取边界。
- [打开本专题页面](../index.html#spec-tags)
- [通用基线](FOUNDATIONS.md)
- [规范总索引](README.md)
- [结构化规范数据](../component-data.json)（记录 id：`tags`）
- [原始历史样板](../original-20260621.html)
- [历史规范条目](../spec-notes.json)

自定义示例 `badge-patterns` 的实现：[badge-patterns.js](../badge-patterns.js)。

## 本组件颜色状态表

| 状态 / 条件 | 统一规则 |
| --- | --- |
| 选择与分类标签 | 已选条件用选中浅蓝底和操作蓝；分类用白底、正文深灰、边框灰，不随机着色。 |
| 标签关闭与恢复 | 取消选择使用操作蓝，键盘进入保留可见焦点；不可移除项无可执行的关闭入口。 |
| 新动态与未读数量 | 纯点和数字角标统一提醒红 #F56C6C；数字白色12px/400。红色表达提醒，不等于业务错误。 |
| 已读、零值与未知 | 真实0或对应动态已查看后隐藏。未知与失败不显示伪造数字，不把角标自动染灰作为加载。 |
| 入口交互 | 悬停、按下、禁用和键盘焦点属于整个入口；角标本体不增加交互变色或独立焦点。 |

本页统一维护标签与角标规则。图标和反馈容器只引用本页；角标是附着提示，不是独立业务状态或按钮。

[公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css)

## 业务落地场景

- [人群标签 · 标签目录 · 分组计数标签](../../showcase/index.html#segments) · [场景文档](../../showcase/docs/segments.md)
- [运营总览 · 顶部系统通知 · 未读角标](../../showcase/index.html?example=notification-badges#overview) · [场景文档](../../showcase/docs/overview.md)；落地范围：系统通知数字角标与下载动态小红点；不代表标签筛选。

[竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md)