八、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP，支持各类消息收发，音视频通话，附vue实现源码(已开源)-聊天输入框扩展面板的实现

会话好友列表的实现

1、项目引言
2、腾讯云后台配置TXIM
3、配置项目并实现IM登录
4、会话好友列表的实现
5、聊天输入框的实现
6、聊天界面容器的实现
7、聊天消息项的实现
8、聊天输入框扩展面板的实现
9、聊天会话管理的实现
10、聊天记录的加载与消息收发
11、定位SD配置与收发定位消息
12、贴图表情的定制化开发
13、腾讯云后台配置TRTC功能
14、集成音视频通话功能
15、集成仿微信的拍照，相册选择插件
16、集成美颜功能
17、集成TPNS消息推送(暂未接入)

---

---

文章概述

本次的文章主要是对于前面的聊天输入框的一个补充，对于有多种要求的开发者而言，可以借鉴本文实现高度定制化的扩展面板

---

聊天输入框扩展面板的实现

1.为何要扩展面板

对于聊天输入而言，我们不可能把所有的业务都搬到一个输入框内，也不可能把所有的操作都搬到输入框内，因此我们很有必要去实现一个扩展面板，并且提供一个简单易用的操作逻辑，比如下图。

2.内置的表情面板

在demo中，由于聊天输入框的需要，我们内置了一个表情面板，在components/ChatInputDrawer目录中，我们现在来看看其中的实现代码

  <view class="face-drawer">
    <scroll-view
      v-if="currentPackage == 0"
      class="face-drawer__scroll"
      scroll-y
    >
      <view key="emoji" class="face-drawer-scroll-ctx">
        <view
          v-for="(item,index) in faceList"
          class="face-drawer__scroll-item"
          @click="$emit('emoji', item)"
        >
          <text
            class="face-drawer__scroll-item-image