Sender 输入框

用于聊天的输入框组件。

何时使用

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

代码演示

基本用法

提交用法

语音输入

语音输入图标

自定义语音输入

自定义按钮

展开面板

引用

自定义底部内容

使用 footer 自定义底部内容。

Deep Thinking

<script setup lang="tsx">
import { ApiOutlined, LinkOutlined, SearchOutlined } from '@ant-design/icons-vue';
import { Button, Divider, Flex, Switch, theme } from 'ant-design-vue';
import { Sender } from 'ant-design-x-vue';
import { ref, watch } from 'vue';

defineOptions({ name: 'AXSenderFooter' });

const { token } = theme.useToken();
const loading = ref<boolean>(false);
const value = ref<string>('');

const iconStyle = {
  fontSize: 18,
  color: token.value.colorText,
}

watch(loading, () => {
  if (loading.value) {
    const timer = setTimeout(() => {
      loading.value = false;
      value.value = '';

      console.log('Send message successfully!');
    }, 2000);
    return () => {
      clearTimeout(timer);
    };
  }
});

defineRender(() => {
  return (
    <Sender
      value={value.value}
      onChange={(v) => {
        value.value = v;
      }}
      // autoSize={{ minRows: 2, maxRows: 6 }}
      placeholder="Press Enter to send message"
      footer={({ components }) => {
        const { SendButton, LoadingButton, SpeechButton } = components;
        return (
          <Flex justify="space-between" align="center">
            <Flex gap="small" align="center">
              <Button style={iconStyle} type="text" icon={<LinkOutlined />} />
              <Divider type="vertical" />
              Deep Thinking
              <Switch size="small" />
              <Divider type="vertical" />
              <Button icon={<SearchOutlined />}>Global Search</Button>
            </Flex>
            <Flex align="center">
              <Button type="text" style={iconStyle} icon={<ApiOutlined />} />
              <Divider type="vertical" />
              <SpeechButton style={iconStyle} />
              <Divider type="vertical" />
              {loading.value ? (
                <LoadingButton type="default" />
              ) : (
                <SendButton type="primary" disabled={false} />
              )}
            </Flex>
          </Flex>
        );
      }}
      onSubmit={() => {
        loading.value = true;
      }}
      onCancel={() => {
        loading.value = false;
      }}
      actions={false}
    />
  );
})
</script>

隐藏源代码

自定义输入框

使用 components.input 自定义输入框。

<script lang="tsx" setup>
import { Input } from 'ant-design-vue';
import { textAreaProps } from 'ant-design-vue/es/input/inputProps';
import { triggerFocus } from 'ant-design-vue/es/vc-input/utils/commonUtils';
import { Sender } from 'ant-design-x-vue';
import type { InputFocusOptions } from 'ant-design-x-vue/sender/interface';
import { defineComponent, ref, shallowRef } from 'vue';

defineOptions({ name: 'AXSenderCustomInput' });

const value = ref<string>('');

const MyInputTextArea = defineComponent({
  name: 'MyInputTextArea',
  props: textAreaProps(),
  setup(props, { attrs, expose }) {
    const textAreaRef = shallowRef();

    const focus = (option?: InputFocusOptions) => {
      triggerFocus(textAreaRef.value, option);
    };

    const blur = () => {
      textAreaRef.value?.blur();
    };

    expose({
      focus,
      blur,
    });

    return () => (
      <Input.TextArea
        {...attrs}
        {...props}
        ref={textAreaRef}
        style={{ minHeight: 100 }}
        autoSize={{ minRows: 3, maxRows: 6 }}
        showCount
        maxlength={20}
        placeholder="Type your message here..."
      />
    );
  },
});

defineRender(() => {
  return (
    <Sender
      value={value.value}
      onChange={(v) => {
        value.value = v;
      }}
      placeholder="Press Enter to send message"
      components={{
        input: MyInputTextArea,
      }}
      onSubmit={(message) => {
        console.log('Submitted:', message);
        value.value = '';
      }}
    />
  );
})
</script>

隐藏源代码

调整样式

黏贴文件

聚焦

API

SenderProps

属性	说明	类型	默认值	版本
actions	自定义按钮，当不需要默认操作按钮时，可以设为 actions={false}	VNode | (oriNode, info: { components: ActionsComponents }) => VNode	-	-
allowSpeech	是否允许语音输入	boolean | SpeechConfig	false	-
classNames	样式类名	见下	-	-
components	自定义组件，input默认为Input.TextArea，确保在自定义输入组件时，按照 Input.TextArea 实现所有必要的 props，以避免功能不全。	Record<'input', ComponentType>	-	-
defaultValue	输入框默认值	string	-	-
disabled	是否禁用	boolean	false	-
loading	是否加载中	boolean	false	-
header	头部面板	VNode | () => VNode	-	-
prefix	前缀内容	VNode | () => VNode	-	-
footer	底部内容	ReactNode | (info: { components: ActionsComponents }) => ReactNode	-	-
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	-	-
onPasteFile	黏贴文件的回调	(firstFile: File, files: FileList) => void	-	-
autoSize	自适应内容高度，可设置为 true | false 或对象：{ minRows: 2, maxRows: 6 }	boolean | { minRows?: number; maxRows?: number }	{ maxRows: 8 }	-

type SpeechConfig = {
  // 当设置 `recording` 时，内置的语音输入功能将会被禁用。
  // 交由开发者实现三方语音输入的功能。
  recording?: boolean;
  onRecordingChange?: (recording: boolean) => void;
  audioIcon?: ButtonProps['icon'] | VNode;
  audioDisabledIcon?: ButtonProps['icon'] | VNode;
  audioRecordingIcon?: ButtonProps['icon'] | VNode;
};

type ActionsComponents = {
  SendButton: InstanceType<ButtonProps>;
  ClearButton: InstanceType<ButtonProps>;
  LoadingButton: InstanceType<ButtonProps>;
  SpeechButton: InstanceType<ButtonProps>;
};

Sender Slots

插槽名	说明	类型
header	头部面板	-
prefix	前缀内容	_
actions	操作按钮	{ ori: VNode; info: { components: { SendButton: InstanceType<Button>; ClearButton: InstanceType<Button>; LoadingButton: InstanceType<Button>; SpeechButton: InstanceType<Button>; } } }
footer	底部内容	{ info: { components: { SendButton: InstanceType<Button>; ClearButton: InstanceType<Button>; LoadingButton: InstanceType<Button>; SpeechButton: InstanceType<Button>; } } }

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

• prefix

  前缀

• input

  输入框

• actions

  操作列表

Header

Content

Footer

• header

  头部

• header-content

  头部内容

• footer

  尾部

主题变量（Design Token）

贡献者

贡献者

正在加载贡献者信息...