Sender 输入框

用于聊天的输入框组件。

何时使用

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

代码演示

基本用法

基础用法，受控进行状态管理。自定义触发器。

提交用法

通过 submitType 控制换行与提交模式。

语音输入

语音输入，需要用户同意麦克风权限。

自定义语音输入

自定义语音逻辑，从而实现调用三方库的语音识别功能。

自定义按钮

通过 actions 属性，可以自定义发送按钮的行为。

`Shift + Enter` to submit

展开面板

使用 header 自定义文件上传示例。

引用

使用 header 做引用效果。

"Tell more about Ant Design X"

自定义底部内容

使用 footer 自定义底部内容。

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

调整样式

通过 actions 属性，调整默认样式。

<script setup lang="tsx">
import { SendOutlined } from '@ant-design/icons-vue';
import { type ButtonProps, App, Flex, Tooltip } from 'ant-design-vue';
import { Sender, theme } from 'ant-design-x-vue';
import { type CSSProperties, onWatcherCleanup, ref, watch } from 'vue';

defineOptions({ name: 'AXSenderSendStyle' });

const { token } = theme.useToken();

const value = ref('Ask something?');
const loading = ref(false);

const Demo = () => {
  const { message } = App.useApp();

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

      onWatcherCleanup(() => {
        clearTimeout(timer);
      })
    }
  });

  const renderSend = (
    props: ButtonProps & { ignoreLoading?: boolean; placeholder?: string; style?: CSSProperties } = {},
  ) => {
    const { ignoreLoading, placeholder, ...btnProps } = props;

    return (
      <Sender
        value={value.value}
        onChange={v => value.value = v}
        loading={loading.value}
        onSubmit={(msg) => {
          message.success(`Send: ${msg}`);
          value.value = ''
          loading.value = true
        }}
        placeholder={placeholder}
        onCancel={() => {
          loading.value = false
        }}
        actions={(_, info) => {
          const { SendButton, LoadingButton } = info.components;

          if (!ignoreLoading && loading.value) {
            return (
              <Tooltip title="Click to cancel">
                <LoadingButton />
              </Tooltip>
            );
          }

          let node = <SendButton {...btnProps} />;

          if (!ignoreLoading) {
            node = (
              <Tooltip title={value.value ? 'Send \u21B5' : 'Please type something'}>{node}</Tooltip>
            );
          }

          return node;
        }}
      />
    );
  };

  return (
    <Flex vertical gap="middle">
      {renderSend({
        shape: 'default',
        placeholder: 'Change button border radius',
        style: { borderRadius: '12px' },
      })}
      {renderSend({
        type: 'text',
        // variant: 'text',
        placeholder: 'Change button icon',
        // color: 'primary',
        style: { color: token.value.colorPrimary },
        icon: <SendOutlined />,
        shape: 'default',
      })}
      {renderSend({ ignoreLoading: true, placeholder: 'Loading not change button' })}
    </Flex>
  );
};

defineRender(() => {
  return (
    <App>
      <Demo />
    </App>
  )
});

</script>

黏贴文件

使用 onPasteFile 获取黏贴的文件，配合 Attachments 进行文件上传。

<script setup lang="tsx">
import { CloudUploadOutlined, LinkOutlined } from '@ant-design/icons-vue';
import { App, Button, Flex } from 'ant-design-vue';
import { Attachments, Sender } from 'ant-design-x-vue';
import { computed, ref } from 'vue';

defineOptions({ name: 'AXSenderPasteImage' });

const Demo = () => {
  const open = ref(false);
  const items = ref([]);
  const text = ref('');

  const attachmentsRef = ref(null);
  const senderRef = ref<InstanceType<typeof Sender>>(null);

  const senderHeader = computed(() => (
    <Sender.Header
      title="Attachments"
      styles={{
        content: {
          padding: 0,
        },
      }}
      open={open.value}
      onOpenChange={v => open.value = v}
      forceRender
    >
      <Attachments
        ref={attachmentsRef}
        // Mock not real upload file
        beforeUpload={() => false}
        items={items.value}
        onChange={({ fileList }) => items.value = fileList}
        placeholder={(type) =>
          type === 'drop'
            ? {
              title: 'Drop file here',
            }
            : {
              icon: <CloudUploadOutlined />,
              title: 'Upload files',
              description: 'Click or drag files to this area to upload',
            }
        }
        getDropContainer={() => senderRef.value?.nativeElement}
      />
    </Sender.Header>
  ));

  return (
    <Flex style={{ height: '220px' }} align="end">
      <Sender
        ref={senderRef}
        header={senderHeader.value}
        prefix={
          <Button
            type="text"
            icon={<LinkOutlined />}
            onClick={() => {
              open.value = !open.value;
            }}
          />
        }
        value={text.value}
        onChange={v => text.value = v}
        onPasteFile={(_, files) => {
          for (const file of files) {
            attachmentsRef.value.current?.upload(file);
          }
          open.value = true;
        }}
        onSubmit={() => {
          items.value = []
          text.value = ''
        }}
      />
    </Flex>
  );
};

defineRender(() => {
  return (
    <App>
      <Demo />
    </App>
  )
});

</script>

聚焦

使用 ref 选项控制聚焦。

API

SenderProps

属性	说明	类型	默认值	版本
actions	自定义按钮，当不需要默认操作按钮时，可以设为 `actions={false}`	VNode \| (oriNode, info: { components: ActionsComponents }) => VNode	-	-
allowSpeech	是否允许语音输入	boolean \| SpeechConfig	false	-
classNames	样式类名	见下	-	-
components	自定义组件	Record<'input', ComponentType>	-	-
defaultValue	输入框默认值	string	-	-
disabled	是否禁用	boolean	false	-
loading	是否加载中	boolean	false	-
header	头部面板	VNode	-	-
prefix	前缀内容	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 }	-

typescript

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

typescript

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

header
头部
header-content
头部内容
footer
尾部

Sender 输入框 ​

何时使用 ​

代码演示 ​

基本用法 ​

提交用法 ​

语音输入 ​

自定义语音输入 ​

自定义按钮 ​

展开面板 ​

引用 ​

自定义底部内容 ​

调整样式 ​

黏贴文件 ​

Upload files

聚焦 ​

API ​

SenderProps ​

Sender Slots ​

Sender Ref ​

Sender.Header ​

Semantic DOM ​

prefix

input

actions

header

header-content

footer

主题变量（Design Token） ​