vue.js客服系统实时聊天项目开发(十一)处理发送消息enter事件以及实现ctrl+enter换行
2023-06-13 09:17:02 时间
当我们的在线客服系统,输入框发送消息的时候,可以直接回车发送消息,并且要支持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;
}
},
相关文章
- 使用 Dapr JS SDK 让 Nest.js 集成 Dapr(微软开源的分布式应用程序运行时)
- Vue(3)webstorm代码格式规范设置与vue模板配置
- 请简述什么是Vue组件化开发_vue组件化开发
- Vue笔记(10) vue-router
- vue md5.js_VUE.js
- 前端使用Vue框架解决跨域问题「建议收藏」
- vue JS 对象转数组[通俗易懂]
- vue.js 渲染函数_Vue.js的不可渲染且可扩展的RTF编辑器[通俗易懂]
- highcharts移动端使用-支持vue-支持横向滚动-代码封装
- Vue 组件通信与路由
- 「后端小伙伴来学前端了」Vue中全局事件总线(GlobalEventBus)原理及探究过程
- Js生成二维码_js在线生成二维码
- vue的双向绑定原理及实现_vue双向绑定指令
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- vue如何引入js文件_vue中引入外部js好麻烦
- vue如何引用js文件_html转化为vue组件
- Vue.js 学习笔记 - 虚拟列表(Virtual-Scroll-List)心得
- Vue中的Vuex详解
- Vue.js 数据绑定的基本实现和代码分析
- vue.js客服系统实时聊天项目开发(九)热门常问关键词展示
- vue.js客服系统实时聊天项目开发(十四)点击加载展示历史消息列表
- vue.js客服系统实时聊天项目开发(十九)使用正则将消息格式替换为产品卡片信息
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- vue入门篇之Vue.js 组件
- vue3报错 Vue received a Component which was made a reactive object.
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)