Layui Tab标题添加徽章需手动插入HTML并调用element.render('badge')；徽章必须嵌套在span内紧贴文字右侧，使用lay-id精准定位更新，自定义CSS适配主题与尺寸。
在 Layui 的 Tab 标题上添加小红点或数字徽章，核心是**手动插入徽章 HTML 并确保样式生效、位置准确、不干扰点击和切换逻辑**。Layui 的 tab 组件本身不提供内置徽章 API，但结构开放，可安全嵌入。
徽章必须加在标题 span 内部，紧贴文字右侧
Tab 标题的 DOM 结构通常是： 里，且紧挨文字，例如：
-
用户管理（小红点） -
消息5（数字徽章）
切勿放在 外或 外——否则会错位、被裁剪，或导致点击区域失效。
必须手动调用 element.render('badge')
Layui 不会自动为动态插入的徽章初始化样式。即使你写对了 class，没渲染就只是普通 span。关键步骤：
- 确保已加载
element模块：layui.use(['element'], function(){...}) - 在添加/更新徽章 DOM 后，立即执行：
element.render('badge'); - 若 Tab 是通过
element.tabAdd()动态添加的，建议在添加后同步插入徽章并调用 render
动态更新徽章时，要精准定位，避免误改
多个 Tab 都可能带徽章（如“消息”“通知”“待办”），不能用 $('.layui-badge').text(3) 全局替换。正确做法：
- 给目标 Tab 的
设置唯一lay-id="notice" - 更新时用选择器精确定位：
$('li[lay-id="notice"] .layui-badge').text('2') - 再调一次
element.render('badge')确保样式刷新
注意：如果 Tab 已激活，仅改文字不会触发重绘，render 是必须的。
颜色与尺寸需手动适配，尤其在深色主题下
Layui 默认徽章色系有限，layui-bg-red 在深蓝后台中可能不够醒目。建议：
- 自定义 CSS 类，例如：
.tab-badge-unread { background-color: #ff5722; color: #fff; } - 搭配
layui-badge主类使用：3 - 若 Tab 使用了
layui-tab-lg，可微调徽章 padding 和 font-size，保持视觉平衡
小红点推荐用 layui-badge-dot，它更轻量；数字提醒优先用 layui-badge，支持圆角和背景色。
