双端兼容 · 桌面 + 移动
StatusTag 状态标签
语义枚举到预设色的状态标签:statuses 声明值到文本/颜色的映射,未命中自动回退兜底色,基于 EbTag 渲染。
映射规则:
- 命中某项时,文本取该项
label(未配置则回退为值的字符串形式),颜色取该项type(未配置则回退info); - 未命中任何项时,显示值的字符串形式,颜色用
fallbackType; - 本组件无事件与插槽,纯展示,适合在表格列插槽、详情描述插槽里直接复用同一份映射表。
基础用法
启用
禁用
待审核
unknown
命中与回退
数字值同样支持(内部转字符串比较与展示);frozen 命中但未配 label,回退显示原始值且颜色用默认 info;mystery 未命中,走 fallback-type 兜底色并显示原值。
404
frozen
启用
mystery
mystery
尺寸与显示效果
size 控制尺寸,effect 控制填充风格(light 浅底 / plain 描边 / dark 实底)。
启用
启用
启用
启用
启用
启用
在表格中使用
经 DataTable 的列插槽复用同一份映射表,未命中行自动灰底兜底,无需逐行写 if/else。
共 0 条
10
- 1
与 EbDataTable 结合时,经列插槽使用即可:<template #status="{ row }"><eb-status-tag :value="row.status" :statuses="statuses" /></template>。
映射匹配注意事项:
- 命中判断是严格相等(
===),数字1与字符串'1'不互等,后端返回类型不稳定时先统一转换; statuses通常定义为模块级常量,多处表格、详情页共享同一份映射,枚举变更只改一处;- 组件内部不做翻译与格式化,未命中显示原值是刻意设计,便于暴露脏数据。
API
StatusTag Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 当前状态值 | string | number | |
| statuses | 映射表,见下方 Statuses 项 | Statuses[] | [] |
| fallbackType | 未命中兜底色 | primary | success | warning | info | danger | error | info |
| size | 尺寸 | small | default | large | small |
| effect | 显示效果 | light | plain | dark | light |
Statuses 项
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 状态值(与 value 严格相等即命中) | string | number | — |
| label | 展示文本,缺省回退为值的字符串形式 | string | — |
| type | 预设色 | primary | success | warning | info | danger | error | info |
本组件无事件、插槽与实例方法,纯展示。