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

努力挣钱的小鑫

已于 2023-12-15 09:48:17 修改

阅读量3.9k

点赞数 2

分类专栏： Element 文章标签： vue.js javascript 前端

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

本文链接：https://blog.csdn.net/IAIPython/article/details/134663688

版权

Element 专栏收录该内容

27 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

 <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;
            }
          }