InputTag 标签选择器

基本使用

```schema: scope=”body” { “type”: “form”, “body”: [ { “type”: “input-tag”, “name”: “tag”, “label”: “标签”, “options”: [ “Aaron Rodgers”, “Tom Brady”, “Charlse Woodson”, “Aaron Jones” ] } ] }

  1. ## 限制标签最大展示数量
  2. > 1.10.0 及以上版本
  3. `maxTagCount`可以限制标签的最大展示数量,超出数量的部分会收纳到 Popover 中,可以通过`overflowTagPopover`配置 Popover 相关的[属性]($docs-zh-CN-components-tooltip#属性表),注意该属性仅在多选模式开启后生效。
  4. ```schema: scope="body"
  5. {
  6. "type": "form",
  7. "body": [
  8. {
  9. "type": "input-tag",
  10. "name": "tag",
  11. "label": "标签",
  12. "maxTagCount": 3,
  13. "overflowTagPopover": {
  14. "title": "水果"
  15. },
  16. "value": "Pineapple,Kiwifruit,Banana,Blueberry,Carambola",
  17. "options": [
  18. {"label": "苹果", "value": "Apple"},
  19. {"label": "香蕉", "value": "Banana"},
  20. {"label": "黑莓", "value": "Blackberry"},
  21. {"label": "蓝莓", "value": "Blueberry"},
  22. {"label": "樱桃", "value": "Cherry"},
  23. {"label": "杨桃", "value": "Carambola"},
  24. {"label": "椰子", "value": "Coconut"},
  25. {"label": "猕猴桃", "value": "Kiwifruit"},
  26. {"label": "柠檬", "value": "Lemon"},
  27. {"label": "菠萝", "value": "Pineapple"}
  28. ]
  29. }
  30. ]
  31. }

批量输入

2.0.0 及以上版本

可以设置"enableBatchAdd": true开启批量输入模式,默认的分隔符为"-",可以使用"separator"属性自定义分隔符,注意避免和"delimiter"属性冲突。

```schema: scope=”body” { “type”: “form”, “body”: [ { “type”: “input-tag”, “name”: “tag”, “label”: “标签”, “enableBatchAdd”: true } ] }

  1. ## 数量&文本长度限制
  2. > 2.0.0 及以上版本
  3. 可以设置`max`限制输入的标签数量,设置`maxTagLength`限制单个标签的最大文本长度。
  4. ```schema: scope="body"
  5. {
  6. "type": "form",
  7. "body": [
  8. {
  9. "type": "input-tag",
  10. "name": "tag",
  11. "label": "标签",
  12. "options": ["abc", "def", "xyz"],
  13. "enableBatchAdd": true,
  14. "max": 5,
  15. "maxTagLength": 3
  16. }
  17. ]
  18. }

属性表

除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置

属性名 类型 默认值 说明
options Array<object>Array<string> 选项组
optionsTip Array<object>Array<string> "最近您使用的标签" 选项提示
source stringAPI 动态选项组
delimiter string false 拼接符
labelField string "label" 选项标签字段
valueField string "value" 选项值字段
joinValues boolean true 拼接值
extractValue boolean false 提取值
clearable boolean false 在有值的时候是否显示一个删除图标在右侧。
resetValue string "" 删除后设置此配置项给定的值。
max number 允许添加的标签的最大数量
maxTagLength number 单个标签的最大文本长度
maxTagCount number 标签的最大展示数量,超出数量后以收纳浮层的方式展示,仅在多选模式开启后生效
overflowTagPopover TooltipObject {"placement": "top", "trigger": "hover", "showArrow": false, "offset": [0, -10]} 收纳浮层的配置属性,详细配置参考Tooltip
enableBatchAdd boolean false 是否开启批量添加模式
separator string "-" 开启批量添加后,输入多个标签的分隔符,支持传入多个符号,默认为”-“

事件表

当前组件会对外派发以下事件,可以通过onEvent来监听这些事件,并通过actions来配置执行的动作,在actions中可以通过event.data.xxx事件参数变量来获取事件产生的数据,详细请查看事件动作

事件名称 事件参数 说明
change event.data.value: string 选中值 选中值变化时触发
blur event.data.value: string 选中值 输入框失去焦点时触发
focus event.data.value: string 选中值 输入框获取焦点时触发

动作表

当前组件对外暴露以下特性动作,其他组件可以通过指定actionType: 动作名称componentId: 该组件id来触发这些动作,动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数,详细请查看事件动作

动作名称 动作配置 说明
clear - 清空
reset - 将值重置为resetValue,若没有配置resetValue,则清空
reload - 重新加载,调用 source,刷新数据域数据刷新(重新加载)
setValue value: string 更新的值 更新数据,多个值用,分隔