zl程序教程

您现在的位置是:首页 >  其他

当前栏目

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

2023-03-07 09:42:39 时间

当我们的在线客服系统,输入框发送消息的时候,可以直接回车发送消息,并且要支持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;
                }

            },