五、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消息推送(暂未接入)

---

---

文章概述

今天的文章比较贴合界面设计部分，在demo中我们已经实现了一个业务组件——聊天输入框，那么本文将教大家聊天输入框的业务实现以及如何修改调整聊天输入框

---

聊天输入框的实现

1.样式分析

根据聊天输入框的俩种模式下，我们可以将样式划分为以下2种

1. 文本模式：
   

2. 语音模式：
   

实际上demo中提供的聊天输入框组件已经覆盖着俩种模式，包括输入文件，发送表情，长按说话，上滑取消等操作。当然如果我们要掌握好这个组件，我们也得分析一下组件中是的代码逻辑。

2. 代码分析

从整体上来说，整个demo工程中将组件进行了解耦合的设计，各个组件文件对应关系如下

由于聊天输入框的组件是ChatInputBox.vue,因此我们着重分析一下该文件中的代码即可。

1. data数据结构

data () {
   
let sysInfo = uni.getSystemInfoSync()
  return {
   
	ios: sysInfo.platform.toLowerCase() == 'ios',
	pageHeight: sysInfo.windowHeight,
    text: '',
    showText: '',
    focus: false,
    speechMode: false,
    faceMode: false,
    extraMode: false,
    speechIng: false,
    hoverOnSpeechCancelBtn: false
  }
},

从data中的数据结构而言我们不难看出，根据speechMode，faceMode，extraMode切换文本，语音，表情，扩展等操作模式的变化，我们对应的来看一下界面中的代码。

2. 界面控制模式切换

在界面中通过speechMode切换显示文本输入框与语音按钮，从而实现语音与文本的切换操作

<image
  @click="clickSpeech"
  class="chat-input-btn is-item"
  :src="!speechMode ? '../static/icon_btn_speech.png'
                    : '../static/icon_btn_keyboard.png'"
></image>
<view v-if="!speechMode"
  :class="[