输入框

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

安装方式

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