Sender 输入框

用于聊天的输入框组件。

何时使用

需要构建一个对话场景下的输入框。

代码演示

智能体输入

基本用法

开关组件

词槽填空

实例方法

提交方式

语音输入

自定义语音输入

自定义后缀按钮

展开面板

快捷指令

引用

自定义底部内容

调整发送按钮样式

黏贴文件

API

SenderProps

属性	说明	类型	默认值	版本
allowSpeech	是否允许语音输入	boolean | SpeechConfig	false	-
autoSize	自适应内容高度	boolean | { minRows?: number; maxRows?: number }	{ maxRows: 8 }	-
classNames	样式类名	见下	-	-
components	自定义组件	Record<'input', ComponentType>	-	-
defaultValue	输入框默认值	string	-	-
disabled	是否禁用	boolean	false	-
footer	底部内容	VNode | (oriNode, info: { components }) => VNode | false	-	-
header	头部面板	VNode | (oriNode, info: { components }) => VNode | false	-	-
loading	是否加载中	boolean	false	-
prefix	前缀内容	VNode | (oriNode, info: { components }) => VNode | false	-	-
readOnly	是否让输入框只读	boolean	false	-
rootClassName	根元素样式类	string	-	-
slotConfig	词槽配置，开启词槽填空模式	SlotConfigType[]	-	2.0
styles	语义化定义样式	见下	-	-
submitType	提交模式	enter | shiftEnter | false	enter	-
suffix	后缀操作按钮区域	VNode | (oriNode, info: { components }) => VNode | false	-	2.0
value(v-model)	输入框值	string	-	-
onChange	输入框值改变的回调	(value: string, event?: Event, slotConfig?: SlotConfigType[]) => void	-	-
onCancel	点击取消按钮的回调	() => void	-	-
onPasteFile	黏贴文件的回调	(files: FileList) => void	-	-
onSubmit	点击发送按钮的回调	(message: string, slotConfig?: SlotConfigType[]) => void	-	-

type SpeechConfig = {
  recording?: boolean;
  onRecordingChange?: (recording: boolean) => void;
};

type ActionsComponents = {
  SendButton: Component;
  ClearButton: Component;
  LoadingButton: Component;
  SpeechButton: Component;
};

type SlotConfigType =
  | { type: 'text'; value: string; key?: string }
  | { type: 'input'; key: string; props?: { defaultValue?: string; placeholder?: string } }
  | { type: 'select'; key: string; props?: { defaultValue?: string; options: string[]; placeholder?: string } }
  | { type: 'tag'; key: string; props?: { label: VNode; value?: string } }
  | { type: 'custom'; key: string; props?: Record<string, any>; customRender?: Function; formatResult?: Function };

Sender Slots

插槽名	说明	类型
header	头部面板	-
prefix	前缀内容	-
suffix	后缀操作按钮区域	{ ori: VNode; info: { components: ActionsComponents } }
footer	底部内容	{ ori: VNode; info: { components: ActionsComponents } }

Sender Ref

属性	说明	类型	默认值	版本
nativeElement	外层容器	HTMLDivElement	-	-
inputElement	内部输入元素	HTMLTextAreaElement | HTMLDivElement	-	2.0
focus	获取焦点	(option?) => void	-	-
blur	取消焦点	() => void	-	-
insert	插入内容	(value, position?) => void	-	2.0
clear	清空内容	() => void	-	2.0
getValue	获取当前值	() => { value: string; config: SlotConfigType[] }	-	2.0

Sender.Header

属性	说明	类型	默认值	版本
children	面板内容	VNode	-	-
closable	是否可关闭	boolean	true	-
forceRender	强制渲染	boolean	false	-
open	是否展开	boolean	-	-
title	标题	VNode | string	-	-
onOpenChange	展开状态改变的回调	(open: boolean) => void	-	-

Sender.Switch

属性	说明	类型	默认值	版本
checkedChildren	选中时显示的内容	VNode	-	2.0
classNames	样式类名	Record<'root' | 'content' | 'icon' | 'title', string>	-	2.0
defaultValue	默认选中状态	boolean	-	2.0
disabled	是否禁用	boolean	false	2.0
icon	图标	VNode	-	2.0
loading	是否加载中	boolean	false	2.0
onChange	切换回调	(checked: boolean) => void	-	2.0
styles	语义化定义样式	Record<'root' | 'content' | 'icon' | 'title', CSSProperties>	-	2.0
unCheckedChildren	未选中时显示的内容	VNode	-	2.0
value	选中状态	boolean	-	2.0

Semantic DOM

Deep thinking can understand the intent behind.

• root

  根节点

• prefix

  前缀

• input

  输入框

• suffix

  后缀

• footer

  底部

• switch

  开关

• content

  内容

Header

Content

• header

  头部

• content

  头部-内容

主题变量（Design Token）

Token	说明	类型	默认值
colorBgSlot	词槽背景颜色	string	rgba(colorPrimary, 0.06)
colorTextSlot	词槽文本颜色	string	colorPrimary
colorTextSlotPlaceholder	词槽文本占位符颜色	string	rgba(colorPrimary, 0.25)
colorBorderSlot	词槽边框颜色	string	rgba(colorPrimary, 0.06)
colorBorderSlotHover	词槽边框悬浮态颜色	string	rgba(colorPrimary, 0.1)
switchCheckedBg	开关选中背景颜色	string	rgba(colorPrimary, 0.08)
switchCheckedHoverBg	开关选中悬浮态背景颜色	string	rgba(colorPrimary, 0.1)
switchUncheckedHoverBg	开关未选中悬浮态背景颜色	string	rgba(colorFillTertiary, 0.04)
colorBorderInput	输入框边框颜色	string	rgba(colorFillTertiary, 0.1)
colorBgSkill	技能背景颜色	string	rgba(colorPrimary, 0.08)
colorBgSkillHover	技能悬浮态背景颜色	string	rgba(colorPrimary, 0.15)

React 文档中的 colorBgActionsDisabled / colorTextActionsDisabled 尚未在 Vue Sender ComponentToken 中暴露，故未收录。