el-input发送消息空格、换行问题

最新推荐文章于 2024-08-13 15:17:51 发布

小居居*

最新推荐文章于 2024-08-13 15:17:51 发布

阅读量2.1k

点赞数 1

分类专栏：项目笔记文章标签：前端

本文链接：https://blog.csdn.net/weixin_48414904/article/details/129498846

版权

项目笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在Vue.js构建的聊天室应用中，遇到输入消息时多个空格被合并及Ctrl+Enter无法换行的问题。通过添加CSS样式`word-wrap:break-word;white-space:pre-wrap;`解决了多空格显示问题，同时在input框的keydown事件中处理Ctrl+Enter组合键，实现文本换行并发送消息的功能。

摘要由CSDN通过智能技术生成

项目场景：

使用input自定义聊天室发送消息

问题描述

消息中包含多个空格发送后，页面上都解析成了一个空格，ctrl+enter键却发送了消息不换行

解决方案：

1、解决多个空格渲染成一个：在展示消息列表的页面给消息添加css样式

word-wrap: break-word;
white-space: pre-wrap;

2、解决换行问题：input框添加事件

@keydown.enter.native.prevent

// 文字输入框
<el-input
        type="textarea"
        placeholder="请输入消息"
        :autosize="false"
        resize="none"
        :value="msg"
        @input="(e) => (msg = msgHandle(e))"
        @blur="(e) => (msg = msgHandle(e.target.value))"
        @keydown.enter.native.prevent="inputKeydown($event)"
        clearable
  />

 // 发送按钮
 <el-button size="small" type="primary" @click="send">发送</el-button>


data () {
return {
    msg:''
 }
}

// 方法
methods:{
  inputKeydown(e) {
    if (e.ctrlKey) {
     // 换行
     const { selectionStart, selectionEnd } = e.target;
     const chars = this.msg.split("");
     chars.splice(selectionStart, selectionEnd - selectionStart, "\n");
        this.msg = chars.join("");
      } else {
        this.send(); // 提交方法
      }
    },
}