做后台管理系统的前端开发，很少有人没碰过Layui。它自带的标签组件，是我平时用得最多的小组件之一，不用自己写CSS调圆角、配色，复制个类名就能用，省不少事。

最基础的标签，就是给span加个layui-badge类。比如`新`，出来就是个灰底白字的小标签，默认的边距、圆角都调好的，放在哪都不违和。

要改颜色也简单，加个对应颜色的后缀类就行。要红色警告款，加layui-badge-red；绿色成功款加layui-badge-green；橙色提示款加layui-badge-orange；蓝色信息款加layui-badge-blue。要别的小众颜色，直接加layui-bg-xxx的背景色类，Layui自带的背景色都能直接用，不用自己写hex值。

还有那种只有圆点没有文字的标签，一般用来标未读消息、新功能入口，加个layui-badge-dot类就搞定。比如``，放在导航菜单、按钮旁边，不用自己调宽高圆角，出来就是个正圆的小红点，要改颜色同样加背景色类就行。

要把标签挂在其他元素右上角，比如头像上挂未读数量、购物车图标上挂商品数，也不用写复杂的定位。给父元素加个position:relative，再给标签加个绝对定位的样式就行，举个例子：

<div style="position:relative;width:40px;height:40px;border-radius:50%;background:#eee;">
<span class="layui-badge layui-bg-red" style="position:absolute;top:-6px;right:-6px;">9</span>
</div>

出来的效果刚好贴在右上角，不会跑偏，大小也合适。

我平时用这个组件最多的三个场景：

第一个是列表页的状态标识。比如订单列表，待付款标橙色，已付款标绿色，已取消标灰色，所有页面的状态配色都统一，不用每个页面单独调样式，也不会出现同一个状态不同页面颜色不一样的问题。

第二个是功能更新提示。后台加了新功能，给对应的菜单项旁边加个红色的“新”标签，或者就放个小圆点，用户登录一眼就能看到，不用单独发通知提醒。

第三个是数据卡片的属性标记。比如商品管理的卡片，给热销商品加个红色“热销”标签，新品加个绿色“新品”标签，突出重点信息，比纯文字展示清楚得多。

平时用的时候，也有几个小细节：

一是如果标签里的动态数字太长，比如超过99，直接显示99+就行，Layui的标签是自适应宽度的，多了只会横向撑开，不会挤变形，也不会挡住旁边的。

二是尽量不要改标签默认的padding和border-radius，不然很容易跟其他组件的风格不搭。要改大小直接改font-size就行，整个标签的边距、圆角会跟着字号等比例缩放，不用挨个调参数。

三是放在按钮里的标签不用额外调间距，直接跟按钮文字放一起就行，Layui默认给了间距，对齐自动做好的，比如`待办 3`，出来的效果很协调。

现在很多人说Layui过时了，官方也停更很久了，但不少老项目还在维护，就算是新项目做快速原型，用它的小组件也够使。尤其是标签这种轻量组件，不用引入额外插件，上手零成本，能解决实际问题就行。