DynamicTags 动态标签
输入框回车/逗号提交生成标签,支持去重、上限与键盘删除。
基础用法
默认去重
示例代码
model-value 为 JSON 数组属性;默认不允许重复标签。
允许重复
allow-duplicate
示例代码
max 上限
max=3
示例代码
达到 max 后输入框自动禁用,删除标签后恢复可输入。
占位符与禁用
placeholder
示例代码
disabled
示例代码
事件
添加/删除事件
示例代码
监听 oas-add / oas-remove / oas-change:
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
allow-duplicate | 允许重复标签 | boolean | — |
disabled | 禁用 | boolean | — |
max | 标签数量上限 | string | — |
model-value | 标签数组(property 或 JSON) | string[] | [] |
placeholder | 输入框占位符 | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-add | 新增标签,detail: { value } |
oas-change | 增删后派发,detail: { value } |
oas-remove | 删除标签,detail: { value } |
键盘:Enter / , 提交;输入框为空时 Backspace 删除最后一个标签。
ARIA:容器 role="list"、标签 role="listitem",删除按钮可聚焦并带 aria-label;重复提交时输入框标记 aria-invalid 并给出提示。