@aligov/tag-input

多标签输入框 用于多个字符串输入

Usage no npm install needed!

<script type="module">
  import aligovTagInput from 'https://cdn.skypack.dev/@aligov/tag-input';
</script>

README

标签输入框

@aligov/tag-input

多标签输入框，用于多个字符串输入

外观是普通的输入框，但输入内容后按回车展示为一个个的 tag，支持按指定的标识符来分割成一个个 tag，并做去重操作。

最底层实现是 Fusion Select 组件的 tag 模式，其 dataSource 是空数组，除明确指定的参数外，其余参数会透出给 Select 组件。

API

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | | ------------ | ---------------- | ---- | ------------------------------ | ------ | ---- | | | defaultValue | 非受控模式 value | 否 | Array | | | | | value | 受控模式 value | 否 | Array | | | | | separator | 分隔符 | 否 | String 或 Array | | | | | onChange | 输入回调 | 否 | (value: Array) => void | | | | | className | 扩展类名 | 否 | string | "" | | | | style | style | 否 | object | {} | | |

separator 用于在按 Enter 键录入内容时，根据该指定的字符串来把最新录入的字符串拆分成多个，会移除分隔后前后的空格。 如输入 1,2, 3 , 45 后，按 Enter，获取到的值中新增了 1，2，3 和 45。然后再和已有的数组来做合并以及去重。

separator 可以是 string 或者 Array，后者特别得可以用于同时支持中英文符合分隔得情况。