Skip to content

插槽配置 ​

在组件周围放入短文案、图标或 HTML,例如金额前的 ¥、后面的 元、搜索框前的放大镜。多数录入组件支持 组件前缀 / 组件后缀;部分组件还有头部、尾部等专属插槽(以添加下拉为准)。

插槽上的 点击事件 可切到 事件流,用可视化节点编排复制、打开模块、消息提醒等,不必写脚本。

在哪里找 ​

  1. 选中画布上的目标字段。
  2. 右侧 组件配置 中找到 插槽配置(空时显示「暂未配置插槽」)。
  3. 点标题旁的 +,从下拉选择要加的插槽。

插槽配置空态

添加插槽下拉

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

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

可配内容类型 ​

添加后会出现一张插槽卡片:

插槽卡片

类型下拉为:

类型(界面文案)做什么示例
图标选设计器内置图标搜索、问号、分享
文字显示短文案¥、元、+86
HTML小段标记灰色「选填」标签

类型:图标 / 文字 / HTML

卡片标题旁还有:

  • 样式:微调字号、颜色、边距等
  • 点击事件:打开「点击事件」弹窗,可写自定义脚本,或切到 事件流 可视化编排

样式与点击事件入口

常见插槽位置 ​

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

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

怎么配置(分步) ​

  1. 选中字段后,在右侧 插槽配置 点 + 添加前缀或后缀(入口见上文截图)。
  2. 在卡片里选类型。选 文字 时直接填内容(如 ¥);选 图标 时点输入框旁菜单挑图标。

文字类型并填写 ¥

  1. 需要双边单位时,再添加 组件后缀(如文字 元),右侧会同时出现前缀、后缀两张卡片。

前缀 ¥ 与后缀 元

  1. 在画布上确认前缀 / 后缀是否对齐。

画布上的前缀后缀效果

  1. 需要点击交互时,点卡片上的 点击事件。弹窗默认在「自定义」;切到 事件流 可看到「开始 / 结束」节点,再加动作或条件。动作参数详见事件流配置。

打开点击事件(自定义)

切换到事件流面板

  1. 再用预览看一遍窄屏是否挤兑。

场景示例 ​

入门:金额单位(¥ / 元) ​

让填写人一眼看出币种与单位。

  1. 选中「申请金额」一类数字字段,打开右侧 插槽配置。

选中申请金额并打开插槽

  1. 点 +,选择 组件前缀。

添加组件前缀

  1. 类型选 文字,填入 ¥。

前缀填 ¥

  1. 再点 +,添加 组件后缀,类型选 文字,填入 元。

再加后缀元

  1. 画布上应看到金额两侧出现 ¥ 与 元。

画布显示 ¥ 与元

入门:搜索框图标 ​

  1. 选中「姓名」等输入框,添加 组件前缀,类型选 图标,打开图标面板选搜索类图标(如 icon-search)。

选择搜索类图标

  1. 卡片显示前缀为图标。

前缀配置为搜索图标

  1. 画布前缀出现搜索图标;可再配占位文本如「姓名 / 工号」。

画布上的搜索前缀

常用:后缀点击复制(事件流) ​

后缀放分享 / 复制类图标,点击后复制当前字段值并提示「已复制」。

  1. 选中「手机号」等字段,添加 组件后缀,类型选 图标,选分享或复制类图标。

后缀复制类图标

  1. 点卡片上的 点击事件,打开弹窗。

打开插槽点击事件

  1. 切到 事件流,在流程中加动作(如复制内容、消息提醒)。节点与参数说明见事件流配置。

复制场景事件流

常用:后缀问号打开说明 ​

  1. 添加 组件后缀,类型选 图标,选问号 / 咨询类图标(如 icon-inquiry)。

后缀问号图标

  1. 点 点击事件 → 事件流,配置「打开模块」等动作,指向模块管理里的填写说明。长说明优先放模块,避免挤在主表上。

问号场景事件流

常用:HTML「选填」小标签 ​

  1. 添加 组件后缀,类型选 HTML。
  2. 写入灰色小标签,例如:<span style="color:#909399;font-size:12px">选填</span>。

HTML 类型选填标签

重要说明仍优先用提示信息,不要只靠插槽承载关键无障碍信息。

注意点 ​

  • 插槽适合短内容;长说明用提示信息或辅助组件。
  • 界面类型文案是 文字(不是「文本」)、图标、HTML。
  • HTML 注意安全与样式污染,避免大段脚本。
  • 换组件类型后,专属插槽可能变化,需重新检查。
  • 设计态与预览的间距可能略有差异,以预览为准。
  • 插槽点击与字段本身的点击 / 变更事件不要重复做同一件事。
  • 点击弹窗里「自定义」和「事件流」二选一;业务配置优先用事件流。

相关阅读 ​

相关技术文档 ​