chat input box extension panel realization 1, project introduction 2, tether cloud backstage configuration TXIM3, configuration of the project and realization of IM log 4, session friend list realization 5, chat input box implementation 6, chat interface container implementation 7, chat message items realization 8, chat input box extension panel implementation 9, chat session management realization 10, chat record load and message distribution 11, positioning SD configuration and send and send location message 12, custom development of graphics, trecton backstage configuration 14 and integrated audio-visual communication functions 15

The implementation of the chat input box extension panel

1、<a href="https://www.cnblogs.com/zhimitec/p/15722235.html">项目引言</a>

2、<a href="https://www.cnblogs.com/zhimitec/p/15722273.html">腾讯云后台配置TXIM</a>

3、<a href="https://www.cnblogs.com/zhimitec/p/15722297.html">配置项目并实现IM登录</a>

4、<a href="https://www.cnblogs.com/zhimitec/p/15722314.html">会话好友列表的实现</a>

5、<a href="https://www.cnblogs.com/zhimitec/p/15722340.html">聊天输入框的实现</a>

6、<a href="https://www.cnblogs.com/zhimitec/p/15722347.html">聊天界面容器的实现</a>

7、<a href="https://www.cnblogs.com/zhimitec/p/15744095.html">聊天消息项的实现</a>

8、<a href="https://www.cnblogs.com/zhimitec/p/15747845.html">聊天输入框扩展面板的实现</a>

9. Implementation of chat session management

11, locate SD configuration and send and receive location messages

12. Customization development of graphics

15, photo taken in micromail, album selection plugin

17, Integrated TPNS Message Send (not yet accessed)

This article is primarily a supplement to the previous chat input box, and for developers with multiple requirements, a highly customized extended panel can be built on this paper

For chat input, it is not possible to move all operations into one input box or all operations into one, so it is important that we achieve an extended panel and provide a simple and easy-to-use operating logic, as compared to the following graph.

In demo, because of the need to enter the chat box, we have built an emoticon panel, and in the components/ChhatInputDrawer directory, we will now look at the realization code.

Since we have already achieved a high level of self-adaptation in the chat input box, we don't need to do much of it here, and we can do the logic of the panel directly, but the focus is on how we tell the parent components to send the data, where the extended panel provides a simple idea as follows:

Here, by way of event feedback, the data that we will need to send will be provided to the parent component, which will receive and process the following codes:

So that we can simply achieve an extended panel and pass out the events inside the panel, thereby enabling the sending of emoticons.

Of course, the above example is a built-in emoticon panel, and normally we need to send pictures, audio videos, red packages, etc., business logic, so we need an extended panel with more functionality, where we have an extra panel, where the developers are required to do the logic themselves, which corresponds to the documents of the components/ChhatInputDRawer/extra.vu.

Here, the extended panel uses json configuration icons, captions, commands to determine how to achieve each extension function, as specified below.

This is the code for the feedback from the click event, and the developers can do the corresponding business processing on the outer level after listening.

As we've already said, it's a Fen pass through the feedback from the event, so we need to listen to the event in the parent component, and we'll do the following.

We've been listening to the ClickFn event here, so we need to get the corresponding page in the OnClickExtraFn, where developers can look at the source code in the demo, not much to repeat, and just send pictures as an example.

Project Open Source Address and Exchange Group

项目成品效果查看：请点击<a href="https://blog.csdn.net/m0_49054461/article/details/121746668">项目引言</a>

项目开源地址：<a href="https://gitee.com/ckong/Zhimi.OpenSource.UniApp.TXIM.Vue">https://gitee.com/ckong/Zhimi.OpenSource.UniApp.TXIM.Vue</a>

viii. Uniapp+vu+Tweeping IM+Tweeper Video to develop an IM Chat APP with micro-mails, to support all types of messages, audio-visual calls, with the vue Implementation Source (open source) - Implementation of the chat input frame extension panel