【Element 】vue3 中 Element el-input textarea 回车发送不换行，ctrl+enter 实现换行

原创已于 2023-12-15 09:48:17 修改 · 4.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-11-28 11:42:02 首次发布

Element 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何使用ElementUI的el-input组件创建一个可自适应高度且支持Ctrl+Enter快捷换行的文本区域，同时展示了如何定制个人样式，如去除边框、调整图标和高度设置。

在这里插入图片描述

 <el-input
           autosize
           type="textarea"
           v-model="searchValue"
           @keydown.native="handleKeyCode($event)"
           placeholder="请输入您想问的内容，按 Ctrl+Enter 换行"
         >

function handleKeyCode(event: any) {
  if (event.keyCode == 13) {
    if (!event.ctrlKey) {
      event.preventDefault();
      handleSend();
    } else {
      searchValue.value += '\n';
    }
  }
}

个人样式，可以参考，主要是去掉边框、缩放图标和高度问题

       :deep(.el-textarea) {
            margin: 10px 0;
            width: 100%;
            .el-textarea__inner {
              box-shadow: none;
              min-height: 30px;
              max-height: 100px;
              height: 30px;
              resize: none;
            }
          }