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

项目场景：

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

---

问题描述

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

---

解决方案：

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

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

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

@keydown.enter.native.prevent

// 文字输入框


 // 发送按钮
 发送


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(); // 提交方法
      }
    },
}