更新记录

1.0.5（2025-09-11） 下载此版本

feat(n-chat-input): 添加更多功能面板

  • 新增图片选择、文件选择和拍照功能项
  • 实现更多功能面板的样式和基本交互
  • 添加 clickMoreItem 事件，用于处理功能项点击
  • 在 readme.md 中增加更多功能面板的说明和示例
  • 添加相关图标图片

1.0.4（2025-09-05） 下载此版本

调整关于表情回显的说明

1.0.3（2025-09-05） 下载此版本

feat(n-chat-input): 增加语音输入功能

  • 新增长按麦克风录音功能
  • 实现向左滑动取消发送，向右滑动转为文本输入
  • 添加录音时倒计时显示，最大录音时长为15秒
  • 优化组件样式，增加底部安全区域适配
  • 更新文档，添加语音输入相关说明和事件定义
查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
× √ - - - - - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - - -

n-chat-input

聊天输入框组件，功能未完善，目前只有部分样式。

组件说明

该组件是一个聊天输入框，包含以下功能模块：

  • 文本输入区域（支持多行自动增高）
  • 语音输入切换按钮
  • 表情选择面板
  • 更多功能面板（+号按钮）

功能特性

  1. 输入框功能

    • 支持文本输入，自动增高
    • 支持最大字符限制（默认200）
    • 支持占位符显示
    • 支持禁用状态
    • 支持光标位置设置
    • 支持键盘确认按钮设置（默认为"send"）

  2. 交互功能

    • 点击麦克风图标切换到语音输入模式
    • 点击表情图标打开表情选择面板
    • 点击加号图标打开更多功能面板
    • 在各面板间切换时会自动关闭其他面板
    • 语音输入支持长按录音，可取消发送或转为文本
    • 语音录制最大时长为15秒

  3. 语音输入功能，目前仅为前端样式，实际功能待完善

    • 长按麦克风图标开始录音
    • 向左滑动可取消发送
    • 向右滑动可转为文本输入
    • 录音时显示倒计时（最大15秒）
    • 松开手指完成录音

  4. 表情面板功能

    • 包含153个表情图标，输入框不可回显表情

  5. 更多功能面板

    • 图片选择
    • 文件选择
    • 拍照功能
    • 注意，只是样式，具体选择逻辑需要自行实现

Props 属性

属性名 类型 默认值 说明
fixed Boolean false 是否固定定位
disabled Boolean false 是否禁用
maxlength Number 200 最大输入长度
cursor Number - 指定focus时的光标位置
placeholder String '' 占位符文字
placeholderClass String 'placeholder-class' 指定占位符的样式类

事件说明

事件名 参数 说明
textarea_focus - 输入框获得焦点时触发
textarea_blur - 输入框失去焦点时触发
textarea_linechange - 输入框行数变化时触发
textarea_input value: 输入框当前值 输入框内容变化时触发
textarea_confirm value: 输入框当前值 点击键盘确认按钮时触发
textarea_keyboardheightchange - 键盘高度变化时触发
clickEmojiItem path: 表情图片路径 点击表情项时触发
toText - 语音输入转文本时触发
cancel - 取消语音输入时触发
send - 发送语音输入时触发
clickMoreItem index: 功能项索引(1:图片, 2:文件, 3:拍照) 点击更多功能项时触发

使用示例

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。