文章概述本文主要是对之前聊天输入框的一个补充，对于各种需求的开发者，可以借鉴本文实现高度自定义的扩展面板聊天输入框扩展面板1.为什么要扩展控制板？所有的业务都搬到一个输入框，不可能把所有的操作都搬到输入框，所以我们有必要实现一个扩展面板，提供简单易用的操作逻辑，如图以下。2.内置表情面板在demo中，由于聊天输入框的需要，我们在components/ChatInputDrawer目录下内置了一个表情面板，下面看一下实现代码{{item}}因为我们已经在聊天输入框已经实现了高度的自适应，所以我们这里不需要做太多的处理，直接实现面板的逻辑即可，但关键是我们如何告诉父组件发送数据，这里扩展面板提供了一个很简单的思路如下：{{item}}这里我们通过事件反馈的方式提供需要发送给父组件的数据，父组件接受并处理的代码如下：//发送表情符号异步sendFace({url}){letV2TIMMessageManager=this.$txim.getMessageManager()letv2TIMMessage=V2TIMMessageManager.createFaceMessage(0,{faceUrl:url})try{letret=awaitV2TIMMessageManager.sendMessage(v2TIMMessage,this.receiver)con.log(ret)this.HistoryMessageToChatLog([ret.data])}catch(e){this.$utils.toast('发送失败')}awaitthis.$nextTick()this.$refs.chatLayout.scrollToBottom()}，这样我们就可以很方便的实现一个扩展面板，将面板中的事件传递出去，从而实现e发送表情功能3、更多功能扩展面板当然，上面的例子只是一个内置的表情面板。一般来说，我们还需要发送图片、音视频、红包等业务逻辑，所以我们需要一个功能更多的扩展面板。这里我们有一个内置的。额外的面板需要开发者自己实现逻辑。面板对应的文件是components/ChatInputDrawer/extra.vue3.1扩展项的配置这里，扩展面板使用json配置图标、标题、命令来决定如何实现各个扩展的功能。具体配置如下:'拍摄',icon:'../static/icon_btn_camera.png'},{name:'voip',title:'视频通话',icon:'../static/icon_btn_voip.png'},{name:'location',title:'Location',icon:'../static/icon_btn_location.png'},{name:'redpaper',title:'红包',icon:'../static/icon_btn_redpaper.png'},{name:'transfer',title:'transfer',icon:'../static/icon_btn_transfer.png'},{name:'use',title:'名片',icon:'../static/icon_btn_use.png'},{name:'file',title:'file',icon:'../static/icon_btn_file.png'},]}}，对于点击事件的反馈，代码是这样的这样，开发者就可以在外部监控后根据fn进行相应的业务处理。clickItem(item){console.log(item)this.$emit('clickFn',item)}3.2扩展item功能实现上面我们说了fn传递是通过事件反馈实现的，所以我们需要监听事件在父组件中。具体操作如下这里我们已经监听了clickFn事件，所以需要在onClickExtraFn中实现相应的页面，这里开发者可以查看demo中的源码，这里就不细说了，这里以发送图片为例onClickExtraFn({name}){switch(name){case'image':uni.chooseImage({success:({tempFilePath})=>{//这里选择完成，需要通知父级发送图片信息this.$emit('sendImage',{filePath:tempFilePath})}})break}}项目开源地址及交流群项目成品效果查看：请点击项目介绍项目开源地址：https://gitee.com/ckong/知米...Uniapp开发交流群：755910061
