插槽配置
插槽配置用于在组件周围或指定插槽位置,放入图标、短文案或 HTML,例如输入框前缀单位「¥」、后缀「元」、搜索图标等。多数录入组件支持「组件前缀 / 组件后缀」;部分组件还有专属插槽(头部、尾部、前置、后置等,以该组件可选列表为准)。

在哪里找
选中组件 → 属性栏 → 插槽配置。
若列表为空,点添加,从下拉中选择可配插槽。

和「插槽区域」组件的区别
本文是单个字段上的装饰插槽(前缀 / 后缀等)。 若要在表单中预留一整块由环境填充的区域,请用容器组件里的「插槽区域」。
可配内容类型
每个插槽卡片通常可选:
| 类型 | 做什么 | 示例 |
|---|---|---|
| 文本 | 显示短文案 | 元、kg、+86 |
| 图标 | 选择设计器内置图标 | 搜索、锁、用户、复制 |
| HTML | 更灵活的标记片段 | 带颜色的小标签(慎用复杂结构) |
还可为插槽设置样式,以及可选的点击事件(点击前缀 / 图标时执行行为动作)。

常见插槽位置
| 名称(界面文案) | 典型位置 |
|---|---|
| 组件前缀 | 控件靠前(如金额前的 ¥) |
| 组件后缀 | 靠后(如单位「元」、说明图标) |
| 头部内容 / 尾部内容 | 部分组件专属 |
| 前置内容 / 后置内容 | 部分输入类组件专属 |
具体支持哪些,以添加下拉中的选项为准;不支持的不会出现。
怎么配置(分步)
- 选中目标字段(如金额输入框)。
- 打开插槽配置 → 添加「组件前缀」或「组件后缀」。
- 选类型:文本填
¥,或选图标。 - 需要时打开样式,微调字号、颜色、边距。
- 需要点击时,为插槽配置点击事件与动作。
- 预览查看对齐是否舒适;窄屏再看一次是否挤兑。

业务示例
入门:金额单位
- 前缀文本:
¥ - 后缀文本:
元
填写人一眼知道币种与单位。
入门:搜索框图标
输入框前缀选「搜索」类图标;配合占位文本「姓名 / 工号」。
常用:手机号区号提示
前缀文本 +86(业务固定国内时);真正的区号选择仍建议用独立字段或选择器。
常用:后缀点击复制
后缀放「复制」图标 → 配置插槽点击 → 动作「复制内容」取当前字段值 → 「消息提醒:已复制」。 编排见事件配置、行为动作。
常用:后缀打开说明模块
后缀「问号」图标 → 点击 → 打开模块「填写说明」。适合字段旁的长说明,不占主表篇幅。
常用:HTML 小标签
后缀用 HTML 显示灰色「选填」小标签;重要说明仍优先放提示信息,避免只靠插槽承载关键无障碍信息。
常用:开关两侧文案
部分开关提供打开 / 关闭相关插槽,用于自定义两侧短文案(如「开 / 关」「启用 / 停用」),按列表添加即可。
注意点
- 插槽适合短内容;长说明用提示信息或辅助组件。
- HTML 类型注意安全与样式污染,避免大段脚本。
- 换组件类型后,专属插槽可能变化,需重新检查。
- 设计态与预览的间距可能略有差异,以预览为准。
- 插槽点击与字段本身的点击 / 变更事件不要重复做同一件事。


