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

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

时间:2023-01-29 22:57:38浏览次数:57  
标签:vue ctrl 换行 客服 js 发送 enter

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

            },

 

 

唯一在线客服系统

https://gofly.v1kf.com

标签:vue,ctrl,换行,客服,js,发送,enter
From: https://www.cnblogs.com/taoshihan/p/17074033.html

相关文章

  • vue.js客服系统实时聊天项目开发(十)过滤xss字符内容-防止xss攻击
    我们在发送消息给用户的时候,都要进行过滤xss字符,xss是跨站脚本攻击,实质上就是发送了html或js代码,现在我们在vue项目中对内容进行一下过滤在vue中安装如下:npminstallxs......
  • vue3语法糖+ts组件传值
    在开发中有些功能是通用的,而且逻辑大致相同,像这种东西可以封成一个组件,比较常用的就是函数封装,组件封装,组件封装是需要引入到页面使用的,所以通常它会有一些自己的方法,父子......
  • Allen vue项目课day1_vue基础
    html讲义css讲义js讲义vue讲义去学。其他什么也不用管。就是脚踏实地,知识一个一个学。怎么挣到钱=怎么学会技术=怎么把成绩学好=怎么把一个又一个题目做出来。脚踏实......
  • Vue+axios+Servlet上传并显示图片
    做了和重写summernote插入图片的回调函数并上传图片到服务器一样的事,但是servlet简介:summernote点击上传(或粘贴)图片,前端用axios以multipart/form-data的形式传到后端,servl......
  • vue3和百度地图关键字检索 定位 点击定位
    效果图在index.html中引入百度地图开放平台  去申请你的ak非常的简单可以自己百度一下<!--这个用官网给的有好多警告更具百度的把https://api.map.baidu.com......
  • vue单行文本溢出裁切省略号鼠标移入展示详细信息的功能
    近期开发,遇到了个需求,要求内容超长时,不换行溢出裁切,显示省略号,鼠标移入时能看到他的详细信息需求够简单,但如何判断内容是否有溢出裁切过,确成了知识盲点了经百度调研,发现,......
  • vue中多行(单行)文本溢出才会出现提示的自定义指令
     //以下代码可以直接粘贴进自己的`.vue`文件中查看效果<template><divclass="parent"><h3>标题</h3><divclass="child"v-ellipsis="3">{{msg......
  • Vue 指定目录下的组件注册为全局组件
    //index.jsimportVuefrom'vue'constrequireComponent=require.context( //组件的相对路径 './', //是否查询其子目录 true, //匹配基础组件......
  • JavaWeb-VUE&Element
    JavaWeb-VUE&Element1,VUE1.1概述Vue是一套前端框架,免除原生JavaScript中的DOM操作,简化书写。Mybatis是用来简化jdbc代码编写的;而VUE是前端的框架,是用来简化Ja......
  • Error: error:0308010C:digital envelope routines::unsupported(vue2项目报错)
    问题描述在终端输入 npmrundev 命令,项目运行报错Error:error:0308010C:digitalenveloperoutines::unsupported问题原因node 版本过高,可以在命令行 输入......