sender.md 3.7 KB

Sender 输入框

用于聊天的输入框组件。

何时使用

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

代码演示

基本用法

:::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

:::

API

SenderProps

属性 说明 类型 默认值 版本
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;
};

Sender Slots

插槽名 说明
header 头部面板
prefix 前缀内容

Sender Ref

属性 说明 类型 默认值 版本
nativeElement 外层容器 HTMLDivElement - -
focus 获取焦点 (option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) - -
blur 取消焦点 () => void - -

Sender.Header

属性 说明 类型 默认值 版本
children 面板内容 VNode - -
closable 是否可关闭 boolean true -
forceRender 强制渲染,在初始化便需要 ref 内部元素时使用 boolean false -
open 是否展开 boolean - -
title 标题 VNode - -
onOpenChange 展开状态改变的回调 (open: boolean) => void - -

Semantic DOM

主题变量(Design Token)