在使用的过程中发现输入文字之后没有相关的发送按钮,所以对TUIKit/TUIPages/TUIChat/components/message-input/index.vue做微调,如下微调内容:
添加@input方法
<input class="TUI-message-input-area" :adjust-position="true" cursor-spacing="20" v-model="inputText" confirm-type="send" confirm-hold="true" @confirm="handleSendTextMessage" @input="onInputValueChange" maxlength="140" type="text" placeholder-class="input-placeholder" placeholder="说点什么呢~" />
此处做如下更改,判断是否展示
<view @tap="handleExtensions" v-if="!sendMessageBtn"> <image class="TUI-icon" src="../../../../assets/icon/more.svg" ></image> </view> <view v-else class="TUI-sendMessage-btn" @touchend.prevent="handleSendTextMessage">发送</view>
相关的js操作
// 发送消息 const handleSendTextMessage = (e: any) => { if (data.inputText.trimEnd()) { uni.$TUIKit.TUIChatServer.sendTextMessage( JSON.parse(JSON.stringify(data.inputText)) ); } data.inputText = " "; data.sendMessageBtn = false // message.scrollId='C2C'+message.ID }; //监听右侧按钮的变化 const onInputValueChange = (e: any) => { if (e.detail.value) { data.sendMessageBtn = true }else{ data.sendMessageBtn = false } };
关于页面回滚底部:在聊天界面添加如下代码:
watch(messages, (newVal: any, oldVal: any) => { nextTick(() => { const newLastMessage = newVal[newVal.length - 1]; const oldLastMessage = oldVal ? oldVal[oldVal.length - 1] : {}; data.oldMessageTime = messages.value[0].time; handleShowTime(); if (oldVal && newLastMessage.ID !== oldLastMessage.ID) { //发完消息之后的页面滚动 setTimeout(() => { data.scrollTop = 998+(newVal.length-15)*50; }, 500); // handleScrollBottom(); // 非从conversationList 首次进入 } }); });
标签:回滚,const,newVal,app,发送,修改,oldVal,data,any From: https://www.cnblogs.com/menxiaojin/p/17318504.html