用于聊天的输入框组件。
需要构建一个对话场景下的输入框
:::demo 基础用法,受控进行状态管理。自定义触发器。
sender/basic
:::
:::demo 通过 submitType 控制换行与提交模式。
sender/submitType
:::
:::demo 语音输入,需要用户同意麦克风权限。
sender/speech
:::
:::demo 自定义语音逻辑,从而实现调用三方库的语音识别功能。
sender/speechCustom
:::
:::demo 通过 actions 属性,可以自定义发送按钮的行为。
sender/actions
:::
:::demo 使用 header 自定义文件上传示例。
sender/header
:::
:::demo 使用 header 做引用效果。
sender/headerFixed
:::
:::demo 通过 actions 属性,调整默认样式。
sender/sendStyle
:::
:::demo 配合 Attachments 进行黏贴文件上传。
sender/pasteImage
:::
:::demo 使用 ref 选项控制聚焦。
sender/focus
:::
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| actions | 自定义按钮 | VNode | (oriNode, info: { components }) => VNode | - | - |
| allowSpeech | 是否允许语音输入 | boolean | SpeechConfig | false | - |
| classNames | 样式类名 | 见下 | - | - |
| components | 自定义组件 | Record<'input', ComponentType> | - | - |
| defaultValue | 输入框默认值 | string | - | - |
| disabled | 是否禁用 | boolean | false | - |
| loading | 是否加载中 | boolean | false | - |
| header | 头部面板 | VNode | - | - |
| prefix | 前缀内容 | VNode | - | - |
| readOnly | 是否让输入框只读 | boolean | false | - |
| rootClassName | 根元素样式类 | string | - | - |
| styles | 语义化定义样式 | 见下 | - | - |
| submitType | 提交模式 | SubmitType | enter | shiftEnter |
- |
| value(v-model) | 输入框值 | string | - | - |
| onSubmit | 点击发送按钮的回调 | (message: string) => void | - | - |
| onChange | 输入框值改变的回调 | (value: string, event?: FormEvent | ChangeEvent ) => void | - | - |
| onCancel | 点击取消按钮的回调 | () => void | - | - |
type SpeechConfig = {
// 当设置 `recording` 时,内置的语音输入功能将会被禁用。
// 交由开发者实现三方语音输入的功能。
recording?: boolean;
onRecordingChange?: (recording: boolean) => void;
};
| 插槽名 | 说明 |
|---|---|
| header | 头部面板 |
| prefix | 前缀内容 |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| nativeElement | 外层容器 | HTMLDivElement |
- | - |
| focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) | - | - |
| blur | 取消焦点 | () => void | - | - |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| children | 面板内容 | VNode | - | - |
| closable | 是否可关闭 | boolean | true | - |
| forceRender | 强制渲染,在初始化便需要 ref 内部元素时使用 | boolean | false | - |
| open | 是否展开 | boolean | - | - |
| title | 标题 | VNode | - | - |
| onOpenChange | 展开状态改变的回调 | (open: boolean) => void | - | - |