AiEditorSender 面板输入
AiEditorSender 是一个功能更强大的 AI 对话输入组件，灵感源自 Element Plus X EditorSender。它集成了附件展示、工具栏及自定义插槽，适用于复杂的 AI 交互场景。
基础用法
包含默认的输入框、字数统计及发送按钮。
基础用法
附件展示与操作
内置附件列表布局（仅展示用，上传逻辑需外部控制），支持预览和移除。
附件展示与操作
状态与工具栏插槽
通过 toolbar 和 actions 插槽，你可以自由扩展输入框底部的业务逻辑。
状态与工具栏插槽
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
modelValue | 输入内容双向绑定 | string | '' |
placeholder | 占位文本 | string | '' |
disabled | 是否禁用 | boolean | false |
loading | 是否处于加载/发送中状态 | boolean | false |
attachments | 附件列表 | AttachmentItem[] | [] |
showWordLimit | 是否展示字数限制 | boolean | true |
maxLength | 最大字数限制 | number | undefined |
rows | 默认初始行数 | number | 1 |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
update:modelValue | 内容变化时触发 | (value: string) |
send | 点击发送或按 Enter (不加 Shift) 时触发 | (value: string) |
change | 内容改变完成时触发 | (value: string) |
remove-attachment | 点击附件移除按钮时触发 | (index: number, item: AttachmentItem) |
clear | 清空内容时触发 | () |
Slots
| 插槽名 | 说明 |
|---|---|
header | 顶部附件展示区插槽 |
toolbar | 底部左侧快捷工具栏插槽 |
actions | 底部右侧追加操作插槽 (在字数统计后，发送按钮前) |
submit | 自定义发送按钮 |
主题变量
| 变量名 | 默认值 |
|---|---|
--yh-ai-editor-sender-bg | var(--yh-bg-color-overlay) |
--yh-ai-editor-sender-radius | 12px |
--yh-ai-editor-sender-border | 1px solid var(--yh-border-color) |
--yh-ai-editor-sender-shadow | 0 4px 16px rgba(0, 0, 0, 0.08) |
--yh-ai-editor-sender-focus-border | 1px solid var(--yh-color-primary) |