做过后台管理系统的，基本都碰过Layui啊。它自带的标签组件轻量省事，不用自己手写样式拼逻辑，捋清楚常用操作，十分钟就能搞定所有标签需求。

先讲不用写JS的静态标签，只要你提前引好Layui的css文件，给span加对应类就能用。

默认实心圆角款加layui-badge，比如`99+`，扔导航栏做消息数提醒刚好。

要小圆点标记的就加layui-badge-dot，比如``，放用户头像角落标未读，不用自己调圆角尺寸。

想要不扎眼的空心款，加layui-badge-outline，边框和文字颜色同步，适合做分类标签，不会抢主的风头。

颜色直接用Layui自带的背景类，layui-bg-red、layui-bg-green、layui-bg-orange这些都有，不用自己瞎调色号，也不会和其他组件风格冲突。

再讲常用的可增删动态标签，比如用户自定义标签、筛选标签这类场景都能用，这时候要用到Layui的element模块。

HTML部分先写个容器，给个lay-filter属性做标识：`

JS里先加载element模块，逻辑也没几行：

layui.use([''element''], function(){
const element = layui.element;
// 监听标签删除事件
element.on(''tag(myTag)'', function(obj){
// 这里可以先调接口删除后端存的对应标签数据
obj.del(); // 删掉页面上的当前标签
})
// 新增标签，比如绑在添加按钮的点击事件上
$(''#addTagBtn'').click(function(){
const tagContent = $(''#tagInput'').val().trim();
if(!tagContent) return; // 空不新增
element.tagAdd(''myTag'', {
content: tagContent,
closed: true, // 加这个参数，新增的标签才带删除按钮
style: ''background:#16baaa; color:#fff'' // 也可以直接加class参数用自带背景类
})
})
})

不用自己手动增删DOM节点，几行代码就搞定增删逻辑。

最后呢说几个我踩过的小坑，省得你走弯路。

第一，动态加标签的时候忘了加closed: true，加出来的标签删不掉，别上来就查是不是组件出bug，先看参数写对没。

第二，标签放到表格单元格里容易折行，给对应的td加个style="white-space:nowrap"，就能正常一行显示。

第三，要做点击标签切换选中状态的，不用找啥特殊API，直接给标签绑个click事件，切换layui-bg-*的类就行，比如点了加layui-bg-blue，再点去掉，简单得很。

Layui的标签组件没有花里胡哨的功能，刚好匹配后台系统的实用需求，不用额外引其他标签插件，省得页面加载变卡。