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

原创 2023-12-15 09:48:17 4.5k 阅读 AI写同款

收录于

Element

努力挣钱的小鑫

码龄8年墨衍会员 · AI 创作全网分发

433粉丝269篇原创

关注

HTML如何设置textarea元素的内容不换行显示要实现中的文本不换行显示，我们可以使用CSS的white-space属性。我们可以将其设置为"pre"或"pre-wrap"来禁止文本换行。总结一下，要实现元素的内容不换行显示，可以使用CSS的white-space属性，并将其值设置为"pre"或"pre-wrap"。然而，有时我们希望文本在中不换行显示，而是按照用户输入的格式进行展示。在样式中，我们将white-space属性的值设置为"pre"，这样中的文本就不会换行显示了。需要注意的是，使用上述方法设置的内容不换行显示后，用户输入的换行符。阅读详情

AI摘要

本文介绍了如何使用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;
            }
          }