提示词输入 Prompt

面向 AI 对话场景的富文本输入组件，支持自适应多行输入、chip 提及、附件上传、语音输入与自定义工具栏。

完整示例

输入内容由 modelValue 与 content 分别维护文本与 chip 片段；chipConfig 配置提及的触发字符与候选列表（详见 提示词标签），uploadConfig 启用附件上传（详见 提示词附件），speechConfig 启用语音输入（详见 提示词语音输入）。工具栏通过 start、end、send 插槽组合：PromptAction、PromptSwitch 与 PromptSelect 提供动作、开关与下拉选择（详见 提示词操作），PromptSend 提供发送入口（详见 提示词发送）。

Speech Mode

Click

Hold

Prompt State

Normal

Readonly

Disabled

Ask anything, type @ or / to mention

0 / 200

隐藏源代码

光标与文本操作

除 focus 与 blur 外，ref 上还有一组直接操作输入区域的方法：setCaret 与 placeCaretAtEnd 定位光标，select 全选，insertText 在光标处插入文本，removeText 删除光标前的字符，insertChip 插入 chip（详见 提示词标签）。disabled 与 readonly 只拦截用户输入，这些方法仍然生效，和原生 input 的语义一致。下面的例子把这些方法都做成了按钮。

value: Hello Pixelium

隐藏源代码

API

PromptCounterConfig

属性	类型	可选	默认值	描述	版本
maxLength	number	是		输入内容的最大长度。	0.2.1
countGraphemes	(value: string) => number	是		自定义的文本长度统计函数，用于计数与截断。	0.2.1
sliceGraphemes	(value: string, limit: number) => string	是		自定义的文本截断函数，接收文本与长度上限。	0.2.1

PromptProps

属性	类型	可选	默认值	描述	版本
modelValue	string | null	是		Prompt 的输入文本。	0.2.1
defaultValue	string | null	是		非受控模式下初始的输入文本。	0.2.1
content	PromptContent | null	是		Prompt 的输入内容，包含文本与 chip 片段。	0.2.1
defaultContent	PromptContent | null	是		非受控模式下初始的输入内容。	0.2.1
shape	'rect' | 'round'	是	'round'	Prompt 的外观形状。	0.2.1
borderRadius	NumberOrPercentage | NumberOrPercentage[]	是		Prompt 的圆角，接受数字、百分比或分别设置四个角的数组。	0.2.1
disabled	boolean	是	false	Prompt 是否禁用。	0.2.1
readonly	boolean	是	false	Prompt 是否只读。	0.2.1
loading	boolean	是	false	Prompt 是否处于提交中。	0.2.1
cancellable	boolean	是	true	提交中是否允许中断。	0.2.1
placeholder	string	是		输入内容为空时展示的占位文字。	0.2.1
autoSize	boolean	是	true	输入区域是否随内容自动增高。	0.2.1
minRow	number	是	1	输入区域的最小行数。	0.2.1
maxRow	number	是	Infinity	输入区域的最大行数。	0.2.1
counterConfig	PromptCounterConfig	是		字数统计的配置，传入后展示计数区域。	0.2.1
submitKey	PromptSubmitKey	是	'ctrl+enter'	触发提交的按键组合。	0.2.1
newlineKey	PromptSubmitKey	是	'enter'	插入换行的按键组合。	0.2.1
requireContent	boolean	是	true	输入内容为空时是否禁止提交。	0.2.1
clearOnSubmit	boolean	是	false	提交后是否清空输入内容。	0.2.1
uploadConfig	PromptUploadConfig	是		附件上传的配置，传入后启用附件能力，详见 提示词附件。	0.2.1
speechConfig	PromptSpeechConfig	是		语音输入的配置，传入后启用语音能力，详见 提示词语音输入。	0.2.1
chipConfig	PromptChipConfig	是		chip 提及的配置，详见 提示词标签。	0.2.1

PromptEvents

事件	参数	描述	版本
update:modelValue	value: string	输入文本变化时触发。	0.2.1
input	value: string, e: Event	在输入区域中输入时触发。	0.2.1
change	value: string, e: Event | undefined	输入区域失去焦点且内容发生变化时触发。	0.2.1
submit	value: string, e: KeyboardEvent | MouseEvent | undefined	提交时触发，提交入口、提交按键与 submit 方法都会触发。	0.2.1
cancel	e: MouseEvent | undefined	提交中点击中断入口时触发。	0.2.1
clear	value: string	输入内容被清空时触发。	0.2.1
focus	e: FocusEvent	输入区域获得焦点时触发。	0.2.1
blur	e: FocusEvent	输入区域失去焦点时触发。	0.2.1
keydown	e: KeyboardEvent	在输入区域中按下按键时触发。	0.2.1
paste	e: ClipboardEvent	在输入区域中粘贴时触发。	0.2.1
update:content	content: PromptContent	输入内容中的文本或 chip 变化时触发。	0.2.1
chipAdd	chip: PromptChip	chip 插入时触发。	0.2.1
chipRemove	chip: PromptChip	chip 移除时触发。	0.2.1
trigger	payload: PromptTriggerPayload	输入提及触发字符时触发。	0.2.1
select	option: string | PromptOption, e: MouseEvent | KeyboardEvent	在候选列表中选择一项时触发。	0.2.1

PromptSlots

插槽	参数	描述	版本
attachment	upload: PromptUploadScope	附件区域，用于放置 PromptAttachment 等附件内容，作用域提供附件上传的操作，其中未指定文件的操作作用于全部对应文件。	0.2.1
footer	upload: PromptUploadScope, send: PromptSendScope, speech: PromptSpeechScope	底部行区域，默认由 start、end 与 send 插槽组成，替换后由自定义内容接管整行；作用域提供附件上传的操作，其中未指定文件的操作作用于全部对应文件。	0.2.1
start	upload: PromptUploadScope, send: PromptSendScope, speech: PromptSpeechScope	工具栏的起始区域，作用域提供附件上传的操作，其中未指定文件的操作作用于全部对应文件。	0.2.1
end	upload: PromptUploadScope, send: PromptSendScope, speech: PromptSpeechScope	工具栏的末尾区域，位于发送入口之前，作用域提供附件上传的操作，其中未指定文件的操作作用于全部对应文件。	0.2.1
send	upload: PromptUploadScope, send: PromptSendScope, speech: PromptSpeechScope	发送入口区域，作用域提供附件上传的操作，其中未指定文件的操作作用于全部对应文件。	0.2.1
count	value: string, count: number, maxLength: number | undefined	计数区域。	0.2.1
chip-option	option: string | PromptOption	候选列表中选项的内容。	0.2.1
chip-group-label	option: PromptGroupOption	候选列表中分组标题的内容。	0.2.1
speech-panel	speech: PromptSpeechScope	语音录制面板区域，替换内置的 PromptSpeechPanel。	0.2.1
speech-cancel	speech: PromptSpeechScope	语音录制面板的取消入口。	0.2.1
speech-visualizer	speech: PromptSpeechScope	语音录制面板的波形区域。	0.2.1
speech-text	speech: PromptSpeechScope	语音识别的实时文本区域。	0.2.1
speech-accept	speech: PromptSpeechScope	语音录制面板的确认入口。	0.2.1

PromptExpose

属性	类型	可选	默认值	描述	版本
focus	() => void	否		让输入区域获得焦点。	0.2.1
blur	() => void	否		让输入区域失去焦点。	0.2.1
clear	() => void	否		清空输入内容。	0.2.1
submit	() => void	否		提交当前的输入内容。	0.2.1
select	() => void	否		选中输入区域中的全部内容。	0.2.1
setCaret	(position: PromptCaretPosition) => void	否		将光标移动到指定位置：start、end 或字符偏移，chip 计为其 label 的长度，偏移落在 chip 内时移动到 chip 之前；setContent 之后调用需先 await nextTick()。	0.2.1
placeCaretAtEnd	() => void	否		将光标移动到输入内容的末尾。	0.2.1
insertChip	(chip: PromptChip) => void	否		在光标处插入 chip。	0.2.1
removeChip	(id: number | string | symbol) => void	否		移除指定 id 的 chip。	0.2.1
insertText	(text: string) => void	否		在光标处插入文本。	0.2.1
removeText	(length: number) => void	否		删除光标前的 length 个字符，区间覆盖到的 chip 整体删除。	0.2.1
getContent	() => PromptContent	否		读取当前的输入内容。	0.2.1
setContent	(content: PromptContent) => void	否		覆盖当前的输入内容。	0.2.1

PromptSubmitModifier

export type PromptSubmitModifier =
	| 'ctrl'
	| 'control'
	| 'meta'
	| 'cmd'
	| 'command'
	| 'alt'
	| 'option'
	| 'shift'

PromptSubmitKey

type SubmitKeyPrefix =
	| PromptSubmitModifier
	| `${PromptSubmitModifier}+${PromptSubmitModifier}`
	| `${PromptSubmitModifier}+${PromptSubmitModifier}+${PromptSubmitModifier}`

export type PromptSubmitKey = 'enter' | `${SubmitKeyPrefix}+enter`

PromptSegment

export type PromptSegment = { type: 'text'; text: string } | { type: 'chip'; chip: PromptChip }

PromptContent

export type PromptContent = PromptSegment[]

PromptCaretPosition

export type PromptCaretPosition = 'start' | 'end' | number

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}

RestAttrs

import type { StyleValue } from 'vue'

export type VueClassValue = string | Record<string, any> | VueClassValue[]
export type VueStyleValue = StyleValue

export type RestAttrs = {
	style?: VueStyleValue | null
	class?: VueClassValue | null
	[x: string]: any
}