Layui Tab 标签页不原生支持 Badge 小圆点，需手动注入 HTML 结构并补定位样式；正确做法是将 layui-badge-dot 放入 li 内、紧贴 a 右侧，a 设 position: relative，badge 用绝对定位居中，添加后须调用 layui.element.render('tab') 确保切换时正常显示。
Tab 标签页里加 Badge 小圆点，Layui 原生不支持
layui 的 tab 模块本身没有 badge 属性或内置样式支持角标提示，所有带数字/红点的 tab 项都得手动注入 html 结构并补样式。别指望调个参数就出来，得自己“贴”上去。
常见错误是直接往 layui-tab-title 的 li 里塞 <span class="layui-badge">3</span>，但没加定位、没处理 tab 切换时 badge 位置错乱、也没考虑响应式缩略后 badge 被裁剪——这些都会让小圆点飘走或消失。
给 Tab 标题插入 badge 的正确 DOM 结构
必须把 badge 放在 li 内部、紧贴 a 标签右侧，且用 position: relative 包裹 a，再用绝对定位撑出 badge。Layui 默认的 layui-tab-title li a 是行内元素，直接加 span 会换行或错位。
- 推荐结构：
<li><a href="javascript:;">用户管理</a><span class="layui-badge layui-badge-dot" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%);"></span></li>
-
layui-badge-dot是 Layui 2.8+ 提供的无数字红点类，比写layui-badge+ 数字更轻量 - 不要用
layui-badge-rim，它带边框，在 tab 狭窄空间里容易显得臃肿 - 如果需要数字，用
<span class="layui-badge">5</span>，但要确保父a有position: relative（需 JS 注入时动态加上）
动态添加 badge 时必须重载 tab 切换逻辑
用 element.tabAdd() 添加新 tab 后，如果直接在返回的 li 元素里 append badge，Layui 不会自动识别这个新节点，切换时可能丢失或错位。必须在添加后手动触发一次 element.tabChange() 或强制重绘。
- 添加 tab 后，立刻用原生 DOM 找到刚插入的
li：document.querySelector('.layui-tab-title li:last-child') - 用
appendChild()或insertAdjacentHTML()插入 badge 元素（避免 innerHTML 覆盖原有事件） - 关键一步：执行
layui.element.render('tab')，否则 badge 在点击切换时会消失或错位 - 如果 tab 内容区也需同步更新 badge 状态（比如未读消息数变化），不要操作 DOM，改用
layui.cache或全局变量缓存状态，再通过element.tabChange()回调刷新对应 badge
移动端和窄屏下 badge 显示异常怎么办
当浏览器宽度 li 中，但 display: none 的 tab 标题区域里 badge 会被隐藏；更麻烦的是，折叠后 a 的 padding 变小，原先写的 right: 10px 可能超出边界。
- 解决方案：加媒体查询覆盖定位：
@media (max-width: 767px) { .layui-tab-title li .layui-badge { right: 4px; } } - 或者更稳妥的做法：在
resize事件中监听 tab 宽度，当检测到 tab 进入折叠模式（layui-tab-bar出现），就把 badge 移到layui-tab-content对应面板的标题栏里（需配合自定义 header） - 别用
layui-badge-dot的font-size做响应式缩放——它本质是伪元素，缩放会导致边缘模糊，直接改width/height更可靠
真正难的不是加一个红点，而是让它在 tab 切换、动态增删、折叠展开、多屏适配下始终待在该在的位置。Layui 的 tab 是静态结构驱动的，所有动态行为都得你兜底。
