ChatInput 聊天输入框

更新: 2025/2/12 字数: 0 字 时长: 0 分钟

提示

ChatInput 组件用于创建聊天输入框。拍照、语音转文字、发送消息的样式已完成，具体功能需要自行实现。

基本使用

发送消息

v-mode:value用于绑定输入框的值，点击发送按钮，触发send事件，v-model:loading可以用来控制当前发送状态，type控制当前转换类型，可选text和voice。

<script setup lang="ts">
const inputValue = ref("");
const loading = ref(false);
const type = ref("text");

function sendMessage(val) {
  console.log(val);
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 2000);
}
</script>

<template>
  <ChatInput
    v-model:value="inputValue"
    v-model:loading="loading"
    v-model:type="type"
    @send="sendMessage"
  />
</template>

拍照

同UploadImg组件一样，调用beforeRead和afterRead方法即可。

<script lang="ts" setup>
import { useRecord } from "@/hooks";

definePage({
  name: "ChatInput",
  meta: {
    level: 2,
    title: "聊天输入框",
    i18n: "menus.chatInput",
  },
});
const inputValue = ref("");

const { beforeRead, afterRead } = useUpload();
</script>
<template>
  <ChatInput
    v-model:value="inputValue"
    @before-read="beforeRead"
    @after-read="afterRead"
  />
</template>

录音转文字

需调用useRecord的方法，配合组件的startRecord和ednRecord方法使用。conversionType为录音转文字的状态，有start、ing/end、noVioce四种状态，showDialog控制是否显示录音转文字的对话框。

<script setup lang="ts">
import { useUpload } from "../upload/utils/hook";
import { useRecord } from "@/hooks";

const inputValue = ref("");
const conversionType = ref("start");
const showDialog = ref(false);

const { beforeRead, afterRead } = useUpload();
const { audioUrl, startRecord, stopRecord } = useRecord();

function startRecordFn() {
  console.log("开始录音");
  conversionType.value = "start";
  startRecord()
    .then(() => {
      console.log("录音中");
    })
    .catch((err) => {
      console.log(err);
      showDialog.value = false;
    });
}
function endRecordFn() {
  console.log("结束录音");
  stopRecord()
    .then(() => {
      console.log("录音文件", audioUrl);
      inputValue.value = "录音结果";
      conversionType.value = "end";
      showDialog.value = false;
    })
    .catch((err) => {
      console.log(err);
      conversionType.value = "noVioce";
    });
}
</script>

<template>
  <ChatInput
    v-model:value="inputValue"
    v-model:conversion-type="conversionType"
    v-model:show-dialog="showDialog"
    v-model:type="type"
    @before-read="beforeRead"
    @after-read="afterRead"
    @start-record="startRecordFn"
    @end-record="endRecordFn"
  />
</template>

API

传参配置

参数名	类型	默认值	说明
v-model:value	string	-	输入框的值
v-model:loading	boolean	false	是否正在发送消息
v-model:type	string	text	当前转换类型，可选text和voice
v-model:conversion-type	string	start	录音转文字的状态，有start、ing、end、noVioce四种状态
v-model:show-dialog	boolean	false	是否显示录音转文字的对话框

事件

事件名	说明	回调参数
send	发送消息事件	输入框的值
before-read	图片上传前触发	图片信息
after-read	图片上传后触发	图片信息
start-record	开始录音事件	-
end-record	结束录音事件	-