vue聊天功能模块（四）聊天消息换行

最新推荐文章于 2024-05-11 09:29:08 发布

waillyer

最新推荐文章于 2024-05-11 09:29:08 发布

阅读量780

点赞数

分类专栏：聊天功能 Vue相关

本文链接：https://blog.csdn.net/waillyer/article/details/108507169

版权

Vue相关同时被 2 个专栏收录

39 篇文章 4 订阅

订阅专栏

聊天功能

15 篇文章 19 订阅

订阅专栏

需求：ctrl+回车换行

回车发送消息

<!--输入区域-->
<div class="messagesBox-BigRight-down20-input">
    <div style="z-index: 9999">
        <el-input class="inputmsg"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入内容"
                  v-model="messagesContents"
                  ref="count"
                  @keydown.native="listen($event)">
        </el-input>
    </div>

</div>
<div :style="messagesBoxBigRightBotton">
    <button class="sendMessageBtn" @click="sendMessage()">发送</button>
    <button 
</div>
</div>

监听输入框即可

listen(event) {
     if (event.ctrlKey  && event.keyCode === 13) {
     // if (event.shiftKey && event.keyCode === 13) {
       console.log("换行");
       this.messagesContents += '\n';
     } else if (event.keyCode === 13) {
       event.preventDefault(); // 阻止浏览器默认换行操作*/
       this.sendMessage(); // 发送文本
     }
   },