ChatGPT输入框以及文件上传框

封装的仿制 chatgpt 的文件的输入框，支持文件上传显示，多行文本自动宽高，上传部分需要有 AntUI 的一些组件或者自己更换为其他 UI 组件也行，本组件只适合有 tailwindcss，Ts，AntUi 的 Vue3 项目

组件传值：

传值：

绑定的 value 值
    modelValue: string;
  height
    height?: number;
width 值
    width?: number;
  输入框最高高度
    maxHeight?: number;
placeholder 提示
    placeholder?: string;

组件  inputBorder

    inputBorder?: string

  输入框的圆角值
    radius?: number;
  icon 在多行情况下的位置
    iconAlign?: “center” | “flex-end” | “flex-start”
 placeholder 文本是否居中
    placeholderCenter?: boolean;
  回车回调函数
    onEnter?: (params?: onEnterParams) => Promise | any;
输入回调函数
    onInput?: (text?: string) => void;
是否开启多模态上传功能 ：multifunctionIcon 与 multifunctionCallbackSet 只有开启多模态功能才会生效
    multifunction?: boolean;
    多模态功能图标 size 与 tile，详细查看代码里 type
    multifunctionIcon?: multifunctionIconParams;
  多模态 CallbackSet 回调
    multifunctionCallbackSet?: multifunctioncaCallback[]
    上传完成的列表
    onUploadProgressList?: uploadFileListParams[]
  取消某一个上传完成的回调
    onUploadProgressListClose?: (item: uploadFileListParams, index: number) => void

组件代码

Ts 类型

export interface CustomTextareaProps {
    // 绑定的 value 值
    modelValue: string;
    // height 值
    height?: number;
    //width 值
    width?: number;
    // 输入框最高高度
    maxHeight?: number;
    // placeholder 提示
    placeholder?: string;

    inputBorder?: string

    // 输入框的圆角值
    radius?: number;
    // icon 在多行情况下的位置
    iconAlign?: "center" | "flex-end" | "flex-start"
    // placeholder 文本是否居中
    placeholderCenter?: boolean;
    // 回车回调函数
    onEnter?: (params?: onEnterParams) => Promise | any;
    // 输入回调函数
    onInput?: (text?: string) => void;
    // 是否开启多模态功能 multifunctionIcon 与 multifunctionCallbackSet 只有开启多模态功能才会生效
    multifunction?: boolean;
    // 多模态功能图标 size 与 tile
    multifunctionIcon?: multifunctionIconParams;
    // 多模态 CallbackSet 回调
    multifunctionCallbackSet?: multifunctioncaCallback[]
    // 上传完成的列表
    onUploadProgressList?: uploadFileListParams[]
    // 取消某一个上传完成的回调
    onUploadProgressListClose?: (item: uploadFileListParams, index: number) => void

}

export interface onEnterParams {
    e: Event;
    text: string;
    clearContent: () => void
}

export interface multifunctionIconParams {
    size: number,
    color: string,
    title: string
}

export interface multifunctioncaCallback {
    label: string,
    cb: (data: any) => any
}

export interface uploadFileListParams {
    name: string,
    type: string,
    // 进度条
    schedule: any
    taskId: number | null

}

使用示例