前端UI组件设计系统【免费下载链接】vue-devui基于全新 DevUI Design 设计体系的 Vue3 组件库面向研发工具的开源前端解决方案。项目地址https://gitcode.com/DevCloudFE/vue-devui点击查看免费下载在研发工具类应用中消息提醒、状态提示是高频场景。vue-devui 的 Badge 徽标组件正是为此设计它以圆形数字徽标或状态色点为核心支持基本徽章、点状徽章、计数徽章、状态徽章四种形态可通过position、offset精确控制位置通过status与bg-color控制颜色体系。读完本文你将掌握 Badge 全部参数含默认值与校验规则的用法并能结合 badge.tsx 的源码理解其类名组合、偏移量计算与最大计数截断的底层实现。何时使用Badge 出现在图标右上角或列表项右方通过不同的状态色加数字提示用户有消息需要处理时。典型场景如未读消息数、系统告警计数、运行状态指示灯等。从 badge.scss 可以看到组件根节点是一个position: relative; display: inline-block的容器这使得它既能内联包裹图标或文字也可以独立使用——这一结构决定了他后续所有形态的行为差异。基本徽章基本徽章是 Badge 的默认形态当有包裹元素时在包裹元素右上角显示徽章和数目。template d-badge :count6 statusdanger classbadge-item未读消息/d-badge d-badge :count7 statuswaiting classbadge-item未读消息/d-badge d-badge :count8 statussuccess classbadge-item未读消息/d-badge d-badge :count100 statusinfo classbadge-item未读消息/d-badge /template style .badge-item { background-color: var(--devui-global-bg, #f3f6f8); margin-right: 20px; margin-bottom: 8px; border-radius: 10px; padding: 4px 8px; font-size: 14px; } /style注意第四个例子count为 100 时由于默认max-count为 99实际渲染为99。这个截断逻辑在 badge.tsx 的text计算属性中实现仅当count与maxCount同时为数字类型时才做比较count maxCount时输出${maxCount}否则原样输出count。单元测试badge max见 badge.spec.ts也验证了该行为count: 100默认渲染99而设置maxCount: 1000后则正常显示100。点状徽章当有包裹元素且show-dot参数为true时Badge 变为点状徽章默认在右上角展示一个小圆点不显示数目。template d-badge statusdanger show-dot classbadge-dot-item d-icon namefeedback / /d-badge d-badge statuswaiting show-dot classbadge-dot-item d-icon namefeedback / /d-badge d-badge statuswarning show-dot classbadge-dot-item d-icon namefeedback / /d-badge d-badge statusinfo show-dot classbadge-dot-item d-icon namefeedback / /d-badge /template style .badge-dot-item { margin-right: 20px; } /style从样式实现看badge.scss点状形态由devui-badge--dot修饰类渲染为6px × 6px的圆形与计数形态devui-badge--count的16px高、最小宽度16px的胶囊形状形成对比。两种形态的类名切换发生在 badge.tsx 的className计算属性中props.showDot ? ns.m(dot) : ns.m(count)。计数徽章当徽章独立使用且不包裹任何元素时只展示徽章状态色和数目即计数徽章。它常用于列表项右侧的未读计数template ul classbadge-list li classbadge-list-item span系统消息/span d-badge statuscommon :count50/d-badge /li li classbadge-list-item span个人消息/span d-badge statuscommon :count500/d-badge /li /ul /template style .badge-list { width: 200px; font-size: 14px; background-color: var(--devui-base-bg, #fff); box-shadow: var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, 0.2)); } .badge-list-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; } /style从源码结构看计数徽章与基本徽章的差异不在 JS 层而在 CSS 层badge.tsx 只有在ctx.slots.default存在默认插槽内容且设置了position时才会追加位置类并追加devui-badge--fixedposition: absolute使其绝对定位覆盖到包裹元素上。没有插槽内容时徽标就是普通流内元素直接以计数形态展示。这也是有包裹/无包裹决定形态的根本原因。状态徽章当徽章独立使用、不包裹任何元素且show-dot为true时即为状态徽章不同状态展示不同色点常用于状态指示如运行中/失败/等待。template d-badge statusdanger show-dot/d-badge nbsp;danger br / d-badge statuswarning show-dot/d-badge nbsp;warning br / d-badge statuswaiting show-dot/d-badge nbsp;waiting br / d-badge statusinfo show-dot/d-badge nbsp;info br / d-badge statussuccess show-dot/d-badge nbsp;success br / /template各状态色与 SCSS 设计变量的映射关系见 badge.scssstatus背景色变量语义danger$devui-danger回退#f66f6a失败、错误、告警warning$devui-warning警告waiting$devui-waiting回退#beccfa等待中success$devui-success成功info$devui-brand品牌/信息默认值common$devui-unavailable且文字色为$devui-aide-text中性/通用这些变量定义在 styles-var/private/_color.scss 与 styles-var/private/_basic.scss 中全部通过 CSS 变量如--devui-danger间接引用因此可以随主题体系整体切换。徽章位置通过position参数设置徽章位置默认top-right。template d-badge :count6 statusdanger positiontop-left classbadge-item未读消息/d-badge d-badge :count7 statuswaiting positiontop-right classbadge-item未读消息/d-badge d-badge :count8 statussuccess positionbottom-left classbadge-item d-icon nameemoji / /d-badge d-badge :count100 statusinfo positionbottom-right classbadge-item d-icon namenotice / /d-badge /template四个位置类badge.scss的实现统一采用贴边 transform: translate(±50%, ±50%)的方式例如top-left是left: 0; top: 0; transform: translate(-50%, -50%)即让徽标中心点恰好落在包裹元素的左上角顶点上四个角同理。这种写法让徽标在任意尺寸的包裹元素上都能保持居中对齐顶点。自定义通过bg-color参数设置徽章展示状态色此时status参数设置的徽章状态色失效通过text-color自定义文字颜色通过offset参数设置相对于position的徽章偏移量。template d-badge :count666 statussuccess stylemargin-right: 20px d-icon namenotice / /d-badge d-badge :count666 statussuccess stylemargin-right: 30px :offset[-10, 0] d-icon namenotice / /d-badge d-badge count6 stylemargin-right: 20px :offset[0, -10]未读消息/d-badge d-badge count6 bg-colorred text-color#fff stylemargin-right: 20px未读消息/d-badge d-badge count2.3k bg-color#000 text-color#fff/d-badge /templateoffset的计算细节值得注意badge.tsx仅在有默认插槽即存在包裹元素且传入了offset时才生效它会把position按-拆分为[yName, xName]如top-right拆为[top, right]然后把offset的[x, y]分别赋给right/left与top/bottom内联样式。也就是说x控制相对right或left的偏移y控制相对top或bottom的偏移单位为 px。offset: [-10, 10]position: top-right最终生成top: 10px; right: -10px这一点被测试badge offsetXYbadge.spec.ts明确断言。另外注意count实际上同时接受字符串badge-types.ts 中其类型为[Number, String]因此count2.3k这类文本型计数可以直接展示这也是最后一个示例成立的原因。隐藏徽章通过hidden属性设置徽章是否可见适合消息已读后渐隐的场景template d-badge :hiddenisHidden :count6 statusdanger classbadge-item未读消息/d-badge d-badge :hiddenisHidden statusdanger show-dot classbadge-dot-item d-icon namefeedback / /d-badge br / d-button clickhiddenNum隐藏/d-button /template script import { defineComponent, ref } from vue; export default defineComponent({ setup() { const isHidden ref(false); const hiddenNum () { isHidden.value !isHidden.value; }; return { isHidden, hiddenNum, }; }, }); /script从实现看hidden并不是条件渲染组件始终渲染徽标类在devui-badge--hidden与devui-badge--show之间切换而是通过 CSS 过渡实现淡入淡出--show为visibility: visible; opacity: 1并使用 ease-out 过渡--hidden为visibility: hidden; opacity: 0并使用 ease-in 过渡badge.scss。测试badge hiddenbadge.spec.ts验证了hidden在true/false切换时这两个类互斥出现。Badge 参数参数名类型默认说明countnumber--可选设置基本徽章和计数徽章中显示的数目源码中类型为[Number, String]支持2.3k等文本计数max-countnumber99可选设置基本徽章和计数徽章最大可显示数目当count max-count时显示max-countshow-dotbooleanfalse可选true时为点状徽章有包裹或状态徽章无包裹false时为基本徽章有包裹或计数徽章无包裹statusBadgeStatusTypeinfo可选状态色positionBadgePositionTypetop-right可选徽标位置bg-colorstring--可选自定义徽标色此时status参数设置的徽章状态色失效text-colorstring--可选自定义徽标文字颜色offset[number, number]--可选有包裹时徽标位置偏移量格式为[x, y]单位为 pxx为相对right或left的偏移量y为相对top或bottom的偏移量hiddenbooleanfalse可选是否显示徽章默认值与上表一一对应可对照 badge-types.ts 中的badgeProps定义status与position还配有validator传入不在白名单内的值时 Vue 会在开发环境给出告警。bg-color与text-color的映射发生在 badge.tsx 的style计算属性中直接写入内联background与color样式优先级高于 status 修饰类的背景色这正是自定义色时 status 失效的实现机制。Badge 类型定义BadgeStatusTypetype BadgeStatusType danger | warning | waiting | success | info | common;BadgePositionTypetype BadgePositionType top-left | top-right | bottom-left | bottom-right;两个类型均在 badge-types.ts 中定义并通过 badge/index.ts 的export * from ./src/badge-types对外导出可直接import { BadgeStatusType } from vue-devui使用以当前仓库导出为准。组件注册名由install方法完成app.component(Badge.name, Badge)即全局可用d-badge。实现小结类名如何组合Badge 的渲染输出为两段外层devui-badge容器 内层devui-badge__content徽标节点badge.tsx。内层类名按如下顺序拼接devui-badge__content基类形态devui-badge--dot或devui-badge--count由show-dot决定状态色devui-badge--{status}只要传了status就追加位置devui-badge--{position}仅当有默认插槽内容且传了positiondevui-badge--fixed有包裹时绝对定位显隐devui-badge--hidden或devui-badge--show。类名前缀由共享工具 use-namespace.ts 生成遵循 BEM 命名b()产出块名e()产出__elementm()产出--modifier。这套命名约定也是单测断言 DOM 类名如contentClass dotClass的基础。单元测试覆盖点badge.spec.ts 对核心行为做了逐项验证可作为行为验收清单基本计数count: 80正常回显show-dot切换false时不出现--dot类置true后出现再置回false后消失max-count截断默认count: 100显示99maxCount: 1000时显示100bg-color生成内联样式background: red;offset[-10, 10]top-right生成top: 10px; right: -10px;hidden切换--hidden/--show类互斥status六个取值逐一产生对应修饰类position四个取值逐一产生对应修饰类。参考文档与源码组件文档badge/index.md组件实现badge.tsxProps 与类型定义badge-types.ts样式实现badge.scss注册入口badge/index.ts单元测试badge.spec.ts赞分享前端UI组件设计系统【免费下载链接】vue-devui基于全新 DevUI Design 设计体系的 Vue3 组件库面向研发工具的开源前端解决方案。项目地址https://gitcode.com/DevCloudFE/vue-devui点击查看免费下载相关推荐Ant Design Blazor Badge 偏移量 Offset 参数实战指南精确定位徽标状态点的位置Ant Design Blazor Badge 偏移量 Offset 参数实战指南精确定位徽标状态点的位置 Badge徽标组件右上角的数字角标或状态点在前端UI组件设计系统Ant Design Vue Badge 徽标组件完全指南count 计数、状态点与 Ribbon 缎带实战Ant Design Vue Badge 徽标组件完全指南count 计数、状态点与 Ribbon 缎带实战 Badge徽标是 Ant Design Vu前端UI组件设计系统Ant Design Blazor Badge 徽标组件完全指南计数角标、状态点与缎带徽标实战Ant Design Blazor Badge 徽标组件完全指南计数角标、状态点与缎带徽标实战 导读 Badge徽标是 Ant Design Blazor前端UI组件设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考