前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue.js客服系统实时聊天项目开发(十一)处理发送消息enter事件以及实现ctrl+enter换行

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

作者头像
唯一Chat
发布2023-02-17 11:47:01
2.1K0
发布2023-02-17 11:47:01
举报
文章被收录于专栏:陶士涵的菜地

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

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

代码语言:javascript
复制
<textarea class="chatAreaInput" v-model="visitor.message"  @keyup.ctrl.enter.exact="chatToUser($event)" @keyup.enter.exact="chatToUser($event,'enter')" ></textarea>

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

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

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

            },
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-01-29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
腾讯企点客服
腾讯企点客服(Tencent QiDian Customer Service)是为销售和客服提供多渠道商机转化与客户服务的智能客服平台。基于腾讯云的即时通讯、音视频、人工智能、大数据、云呼叫中心等技术,以个性化服务和精准客户洞察撬动销售转化与复购增购。企点客服全面覆盖了从销售到服务的全链路业务场景,帮助企业构建一体化的客户运营体系,极大提升了企业获客、待客、留客的效率。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档