Skip to content

插槽配置

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

插槽配置面板

在哪里找

选中组件 → 属性栏 → 插槽配置

若列表为空,点添加,从下拉中选择可配插槽。

添加插槽下拉

和「插槽区域」组件的区别

本文是单个字段上的装饰插槽(前缀 / 后缀等)。 若要在表单中预留一整块由环境填充的区域,请用容器组件里的「插槽区域」。

可配内容类型

每个插槽卡片通常可选:

类型做什么示例
文本显示短文案kg+86
图标选择设计器内置图标搜索、锁、用户、复制
HTML更灵活的标记片段带颜色的小标签(慎用复杂结构)

还可为插槽设置样式,以及可选的点击事件(点击前缀 / 图标时执行行为动作)。

插槽卡片结构

常见插槽位置

名称(界面文案)典型位置
组件前缀控件靠前(如金额前的 ¥)
组件后缀靠后(如单位「元」、说明图标)
头部内容 / 尾部内容部分组件专属
前置内容 / 后置内容部分输入类组件专属

具体支持哪些,以添加下拉中的选项为准;不支持的不会出现。

怎么配置(分步)

  1. 选中目标字段(如金额输入框)。
  2. 打开插槽配置 → 添加「组件前缀」或「组件后缀」。
  3. 选类型:文本填 ¥,或选图标。
  4. 需要时打开样式,微调字号、颜色、边距。
  5. 需要点击时,为插槽配置点击事件与动作。
  6. 预览查看对齐是否舒适;窄屏再看一次是否挤兑。

金额前缀效果

业务示例

入门:金额单位

  • 前缀文本:¥
  • 后缀文本:

填写人一眼知道币种与单位。

入门:搜索框图标

输入框前缀选「搜索」类图标;配合占位文本「姓名 / 工号」。

常用:手机号区号提示

前缀文本 +86(业务固定国内时);真正的区号选择仍建议用独立字段或选择器。

常用:后缀点击复制

后缀放「复制」图标 → 配置插槽点击 → 动作「复制内容」取当前字段值 → 「消息提醒:已复制」。 编排见事件配置行为动作

常用:后缀打开说明模块

后缀「问号」图标 → 点击 → 打开模块「填写说明」。适合字段旁的长说明,不占主表篇幅。

常用:HTML 小标签

后缀用 HTML 显示灰色「选填」小标签;重要说明仍优先放提示信息,避免只靠插槽承载关键无障碍信息。

常用:开关两侧文案

部分开关提供打开 / 关闭相关插槽,用于自定义两侧短文案(如「开 / 关」「启用 / 停用」),按列表添加即可。

注意点

  • 插槽适合短内容;长说明用提示信息或辅助组件
  • HTML 类型注意安全与样式污染,避免大段脚本。
  • 换组件类型后,专属插槽可能变化,需重新检查。
  • 设计态与预览的间距可能略有差异,以预览为准。
  • 插槽点击与字段本身的点击 / 变更事件不要重复做同一件事。

相关阅读

相关技术文档