VUE+element Input框 实现输入内容可自适应文本高度，换行（空格换行，enter发送）阻止文本域的回车事件

**Vue + Element UI 中的自适应输入框**

在实际开发中，我们经常需要实现一个自适应输入框，即当用户输入内容时，输入框的高度会根据内容的长度进行调整。同时，我们也希望阻止文本域的回车事件，以免导致页面跳转或其他意外行为。

**解决方案**

我们可以使用 Vue 的 `v-model`选项和 Element UI 的 `Input` 组件来实现自适应输入框。具体步骤如下：

1. 首先，我们需要在 Vue 组件中定义一个数据属性来存储用户的输入内容。
2. 然后，我们需要在模板中使用 `v-model`选项绑定这个数据属性到 Element UI 的 `Input` 组件上。
3. 接着，我们需要在组件的生命周期函数中监听 `input`事件，并根据输入内容的长度调整输入框的高度。
4. 最后，我们需要阻止文本域的回车事件，以免导致页面跳转或其他意外行为。

**示例代码**

html<template>
 <div>
 <!-- 自适应输入框 -->
 <el-input v-model="inputValue" type="textarea" :rows="1" @input="handleInput"></el-input>

 <!-- 显示输入内容的文本域 -->
 <el-textarea v-model="inputValue" readonly></el-textarea>
 </div>
</template>

<script>
export default {
 data() {
 return {
 inputValue: '', // 用户输入的内容 }
 },
 methods: {
 handleInput() { // 监听 input事件，调整输入框高度 const textarea = this.$refs.textarea;
 if (textarea) {
 textarea.style.height = 'auto';
 textarea.style.height = `${this.inputValue.length *15}px`;
 }
 },
 },
}
</script>