标签选择

1. 组件概述

标签选择是一个数据输入组件，用于输入和管理多个标签。用户可以直接输入自定义标签，也可以从预设的选项列表中选择。该组件适用于需要收集多个关键词或分类信息的场景，例如为文章添加标签、标注技能特长、选择兴趣爱好等。与普通的多选下拉框不同，标签选择更强调灵活性，用户既可以选择已有选项，也可以自由创建新标签。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：AI 写作助手的关键词输入。用户在使用 AI 生成文章时，通过标签选择组件输入多个关键词（如”人工智能”、“教育”、“未来趋势”），这些关键词作为变量传递给工作流，AI 根据关键词生成相关内容。可以预设一些常用关键词供用户快速选择，同时允许用户输入自定义关键词。
• 场景二：学习兴趣调查问卷。在学生注册或课程推荐场景中，使用标签选择让学生选择自己感兴趣的学科领域（如”数学”、“物理”、“编程”、“历史”等）。设置最大标签数量为 5 个，避免选择过多。收集的兴趣标签可用于后续的个性化课程推荐。

加载中...

查看 JSON

复制 JSON

3. 功能配置

属性

基本折叠组

配置项	说明
绑定变量	组件的变量名，用户选择或输入的标签值会存储到该变量中。其他组件可以绑定此变量来获取用户选择的标签，调用工作流时该变量也会传递给后端。
标题	显示在组件左侧的标签文字，用于说明该输入项的用途，如”文章标签”、“技能特长”。
可清除	开启后，组件右侧会显示清除按钮，用户可以一键清空所有已选择的标签。
选项提示	当配置了预设选项时，在选项列表上方显示的提示文字。默认为”最近您使用的标签”，可以修改为更符合场景的提示，如”推荐标签”。
默认值	组件的初始值，可以预先设置一些默认选中的标签。支持设置为静态值或绑定变量。
拼接值	开启后，多个标签的值会用拼接符连接成一个字符串存储。例如选择了”红色”和”蓝色”，开启拼接值后存储为”red,blue”。关闭后则存储为数组格式。
拼接符	当开启”拼接值”时，用于连接多个标签值的符号，默认为英文逗号”,“。可以根据需要修改为其他符号，如分号”;“或竖线”|“。
仅提取值	当关闭”拼接值”时显示此选项。开启后，存储的数组只包含每个标签的值（如 [“red”, “blue”]）；关闭后，存储的数组包含完整的选项对象（如 [{label: “红色”, value: “red”}, …]）。
最大标签数量	限制用户最多可以选择或输入的标签数量。设置后，当达到数量上限时，用户将无法继续添加新标签。适用于需要控制标签数量的场景，如”最多选择 5 个兴趣标签”。

选项折叠组

配置项	说明
数据	配置预设的标签选项列表。设置选项后，用户输入时会以下拉列表的形式展示这些选项供参考选择。每个选项包含显示文本和对应的值。即使配置了预设选项，用户仍然可以输入不在列表中的自定义标签。

状态折叠组

配置项	说明
可见	控制组件是否显示在页面上。默认可见，可以设置为始终隐藏或根据条件动态控制。
隐藏	控制组件是否隐藏。与”可见”相反，开启后组件不显示。
隐藏时删除字段	开启后，当组件被隐藏时，其存储的值会从数据中删除。适用于条件显示的场景，避免提交不相关的数据。
静态展示	开启后，组件变为只读的纯文本展示模式，显示已选择的标签但不可编辑。适用于详情页或确认页面。
禁用	控制组件是否禁用。禁用后组件变灰且不可操作，但仍然显示在页面上。

事件

配置项	说明
添加事件	支持”值变化”、“获取焦点”、“失去焦点”三种触发事件。“值变化”在用户添加或删除标签时触发，常用于根据标签变化实时更新其他内容；“获取焦点”和”失去焦点”分别在用户点击进入和离开输入框时触发。