输入框

用于 AI 聊天的输入框，可进行能力扩展

点击查看代码

<template>
  <div style="padding: 24px; border: 1px solid #ddd">
    <hi-sender
      :value="inputValue"
      placeholder="发送消息"
      @change="changeValue"
      @send="send"
      @stop="stop"
    >
    </hi-sender>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import HiSender from "pangea-component/hi-sender";
import "pangea-component/dist/style.css";

const inputValue = ref("");

const changeValue = (value) => {
  inputValue.value = value;
};

const send = (value) => {
  console.log("value", value);
};

const stop = () => {};
</script>

安装方式

yarn add pangea-component

引用方式

import HiSender from "pangea-component/hi-sender";
import "pangea-component/dist/style.css";

API

Props

参数名	描述	类型	默认值
value	输入框的值	string	-
placeholder	输入框占位文字	string	-
disabled	是否禁用输入框	boolean	false
loading	是否发送中	boolean	false
max	最大输入字数	number	-
allowSpeech	是否允许语音输入	boolean	false
allowUpload	是否允许附件上传	boolean	false
uploadType	上传类型	"image" | "file" | "all"	"all"
uploadLimit	上传文件数量限制	number	-
uploadConfig	上传接口配置	UploadConfig	-
minRow	显示最小行数	number	1
maxRow	显示最大行数	number	5

Events

方法名	描述	参数
change	输入内容变化时触发的事件	(value: string) => void
send	发送时触发的事件	(value: string) => void
stop	取消发送触发事件	() => void

Slot

插槽名	描述	参数
top	输入框顶部插槽	-
prefix	输入框底部左侧扩展插槽	-
suffix	输入框底部右侧扩展	-

使用示例

<template>
  <hi-sender
    :value="inputValue"
    placeholder="发送消息"
    @change="changeValue"
    @send="send"
    @stop="stop"
  >
  </hi-sender>
</template>
<script lang="ts" setup>
  import { ref } from "vue";
  import HiSender from "pangea-component/hi-sender";

  const inputValue = ref("");

  const changeValue = (value) => {
    inputValue.value = value;
  };

  const send = (value) => {
    console.log("value", value);
  };

  const stop = () => {};
</script>