#3136·layui

[tag] 新增 Tag 标签组件

Author: sunxiaobin89Created Aug 13, 2026Updated Aug 14, 2026

背景

管理后台「状态标记、分类标签、筛选条件」等场景的高频展示组件。目前 layui 2.x → 3.0 均未提供通用标签组件(现有 badge 为角标语义,与 tag 不同)。标签组件作为管理后台的通用能力,主流 UI 组件库普遍内置支持。

目标

  • 新增通用 tag 标签组件,基于 3.0 组件基类(Component)实现
  • 支持语义状态色(normal / success / warning / danger / info)、尺寸(xs / sm / lg)、主题(实心 / 浅色 / 朴素)、胶囊圆角、禁用、可关闭交互
  • 支持标签组:通过数据数组渲染一组标签,共用一套属性 + 单个标签个性覆盖
  • 遵循 lay- 命名空间与 CSS Variables 令牌体系

范围

  • 新增src/components/tag.jssrc/css/modules/tag.csstests/visual/tag.html
  • 修改src/components/initializer.jssrc/css/index.csssrc/index.js / src/index.umd.jssrc/core/i18n.js
  • 无需:docs、tests/unit

设计

控制方式

配置维度(状态色 / 尺寸 / 主题 / 圆角 / 可关闭)通过 data-lay-* 属性承载(对齐 menu 组件与官方 lay.parseDataset 前缀约定),CSS 用属性选择器驱动;class 仅保留结构(lay-tag)与状态(lay-is-disabled),关闭按钮由组件自动注入、无需手动编写。

xml
<span class="lay-tag">默认</span>
<span class="lay-tag" data-lay-type="success" data-lay-effect="light">浅色成功</span>
<span class="lay-tag" data-lay-type="danger" data-lay-size="sm" data-lay-round>小胶囊</span>
<span class="lay-tag" data-lay-closable lay-filter="demo">可关闭</span>

功能

  • 状态色:normal / success / warning / danger / info(默认主题色)
  • 主题(effect):solid 实心(默认)/ light 浅色 / plain 朴素
  • 尺寸:xs / sm / lg;胶囊圆角(data-lay-round);禁用(lay-is-disabled 状态类)
  • 可关闭:data-lay-closable 自动注入关闭按钮(含键盘 Enter/空格关闭),close(filter) 事件回调返回 false 可阻断
  • 标签组tag.generate({ data, ...公共属性 }) 数据数组渲染一组标签,字符串项用公共属性、对象项个性覆盖

CSS 要点

  • 全量走令牌:七色 + 灰度 + --lay-border-radius + --lay-spacing-*
  • 浅色/朴素主题用 color-mix 由语义色派生淡色背景与细边框
  • 换行间距:标签自身 margin(右间距 + 垂直间距),利用「换行时行尾 margin 被浏览器忽略、行首不缩进」的特性,行间距 8px

文件清单

操作 文件
新增 src/components/tag.jssrc/css/modules/tag.csstests/visual/tag.html
修改 src/components/initializer.jssrc/css/index.csssrc/index.jssrc/index.umd.jssrc/core/i18n.js