vue.js客服系统实时聊天项目开发（十一）处理发送消息enter事件以及实现ctrl+enter换行

唯一Chat

发布于 2023-02-17 11:47:01

2.4K0

当我们的在线客服系统，输入框发送消息的时候，可以直接回车发送消息，并且要支持ctrl+enter是换行操作

那么我们的html事件部分是这样写

<textarea class="chatAreaInput" v-model="visitor.message"  @keyup.ctrl.enter.exact="chatToUser($event)" @keyup.enter.exact="chatToUser($event,'enter')" ></textarea>

一定要把两个@都带上，这样才能实现

然后函数里进行下面的处理

           //发送给客户
            chatToUser:function(e) {
                let _this=this;
                //用户点击了ctrl+enter触发
                if(e.ctrlKey && e.keyCode==13) { 
                    this.visitor.message += '\n';
                    return;
                }

            },