青梧 UI — 中国历法组件库

TagInput 标签快捷插入

输入框 + 标签快捷栏：点击标签自动填入输入框，已插入的标签自动隐藏，删除后重现；text-layout 驱动展开/收起；零依赖 · 纯 TypeScript · 全键盘可用

基础用法

点击标签、移除标签或手动输入，操作将记录在此

受控模式

输入值：（空） · 可用标签：HTML, CSS, JavaScript

自定义格式

展开 / 收起 · @qingwu-ui/text-layout

chip-in-input 模式

已选：前端, 组件库 · 已选以 chip 内嵌输入框， × 删除即移除；草稿经 Enter / 逗号 / 失焦提交（maxTags: 5上限，超出保留草稿）；下方快捷栏为可用标签建议

回车创建标签

在输入框输入文本并按 Enter，即作为新标签加入快捷栏（已存在则忽略并清空输入）

import { TagInput } from "@qingwu-ui/tag-input";
import "@qingwu-ui/tag-input/style.css";

// 基础用法：点击标签填入输入框（逗号分隔），
// 已插入的标签从快捷栏消失，删除后重现
const ti = new TagInput(el, {
  defaultTags: ["React", "TypeScript", "CSS"],
  onChange: (v) => save(v),
});

// 受控模式
const ti2 = new TagInput(el2, {
  value, tags, // 受控
  onChange: (v) => { value = v; ti2.update({ value }); },
  onTagsChange: (t) => { tags = t; ti2.update({ tags }); },
});

// 自定义格式：插入 # 前缀，parseTags 同步解析
const ti3 = new TagInput(el3, {
  formatInsert: (tag) => "#" + tag,
  parseTags: (v) => v.split(",").map((s) => s.trim().replace(/^#/, "")),
});

// 展开 / 收起：maxRows 限制标签栏行数（layoutChips 计算）
const ti4 = new TagInput(el4, { defaultTags: MANY_TAGS, maxRows: 1 });

// 回车创建：输入文本按 Enter 加入快捷栏
const ti5 = new TagInput(el5, {
  defaultTags: ["前端"],
  allowEnterCreate: true,
  onTagsChange: (t) => save(t),
});

// 实例 API
ti.insertTag("Vue");    // 程序化插入
ti.removeTag("React");  // 从快捷栏移除
ti.createTag("Svelte"); // 程序化创建新标签
ti.destroy();            // 销毁

配置项

属性	说明	类型	默认值
`value`	受控输入值（传入后进入受控模式，用户操作仅回调不内部改值；inline 模式下不生效）	`string`	`-`
`defaultValue`	非受控初始输入值（inline 模式下不生效）	`string`	`""`
`tags`	受控可用标签列表（传入后 × 删除仅回调不内部改值）	`string[]`	`-`
`defaultTags`	非受控初始可用标签列表	`string[]`	`[]`
`formatInsert`	标签插入格式器，默认原样；标签间默认以 ", " 分隔（自定义格式时需同步 parseTags）	`(tag: string) => string`	`原样`
`parseTags`	从输入值解析已存在标签，驱动快捷栏显隐（已插入的标签按钮消失、删除后重现）	`(value: string) => string[]`	`逗号分割`
`maxRows`	标签栏最大行数（layoutChips 计算），超出折叠为 +N 更多；0 不折叠	`number`	`2`
`moreLabel`	折叠时按钮文案	`(count: number) => string`	`+N 更多`
`collapseLabel`	展开后收起按钮文案	`string`	`收起`
`placeholder`	输入框占位符	`string`	`-`
`allowEnterCreate`	输入框按 Enter 时，将当前输入文本作为新标签加入快捷栏（已存在则忽略）并清空输入；inline 模式下 Enter 始终加入已选标签，无需此开关	`boolean`	`false`
`inline`	chip-in-input 模式：已选标签以 chip 内嵌输入框，× 删除即从已选数组移除；下方标签栏仍为可用标签建议；inline 下 value 字符串不生效，已选以 selected / defaultSelected 为准，input 仅承载草稿（Enter / 逗号 / 失焦 / 点建议提交）	`boolean`	`false`
`selected`	inline 专属：已选标签数组（受控，传入后提交/删除仅回调 onSelectedChange，由调用方以 update({ selected }) 回灌）	`string[]`	`-`
`defaultSelected`	inline 专属：非受控初始已选标签数组	`string[]`	`[]`
`maxTags`	输入值中标签数量上限，0 不限；超出后插入 / 回车添加被忽略	`number`	`0`
`disabled`	禁用（输入框与标签按钮均不可交互）	`boolean`	`false`
`readOnly`	只读（输入框只读，标签按钮禁用但可见）	`boolean`	`false`
`removable`	是否渲染 × 移除按钮	`boolean`	`true`
`className`	自定义类名（追加到根容器）	`string`	`-`
`font`	CSS font 字符串（text-layout 测量用），不传则读取容器 computed style	`string`	`computed`

事件

属性	说明	类型	默认值
`onChange`	输入值变化回调（bar 模式：逗号拼接串；inline 模式：草稿文本）	`(value: string) => void`	`-`
`onTagsChange`	标签列表变化回调（× 移除快捷标签时）	`(tags: string[]) => void`	`-`
`onSelectedChange`	inline 专属：已选标签数组变化回调（提交 / × 删除 / 点建议时触发）	`(selected: string[]) => void`	`-`

实例方法

属性	说明	类型	默认值
`insertTag(tag)`	程序化插入标签到输入框（已存在则忽略；inline 模式为提交到已选数组并清空草稿）	`(tag: string) => void`	`-`
`createTag(tag)`	程序化创建新标签加入快捷栏（allowEnterCreate 的内部逻辑；已存在则忽略并清空输入）	`(tag: string) => void`	`-`
`removeTag(tag)`	从快捷栏移除标签（不改动输入值）	`(tag: string) => void`	`-`
`update({ value?, tags? })`	受控模式下外部同步值	`(opts) => void`	`-`
`setDisabled(v) / setReadOnly(v)`	动态切换禁用 / 只读状态	`(v: boolean) => void`	`-`
`destroy()`	销毁组件，清空宿主容器	`() => void`	`-`