Vue自适应高度输入框技巧

引言：自适应输入框的挑战

在现代Web应用开发中，我们经常需要创建能够根据内容自动调整高度的输入框，以提供更流畅的用户体验。传统的<input>标签由于其单行特性，无法满足这种需求。一些开发者可能会尝试使用元素并结合contenteditable属性来模拟输入框，期望通过这种方式实现多行输入和自适应高度。然而，这种方法在实际应用中会遇到诸多挑战，例如难以与Vue的v-model进行双向绑定，导致无法方便地获取用户输入值，也难以处理光标管理和复杂的文本格式化。

为了解决这些问题，我们需要一种更健壮、更符合Web标准的方案。

核心方案：利用<textarea>实现自适应高度

<textarea>元素是HTML中专为多行文本输入设计的标签，它天然支持多行输入，并且可以很好地与Vue的v-model指令配合使用，从而轻松实现数据的双向绑定。结合一些JavaScript和CSS技巧，我们还可以让<textarea>实现内容自适应高度的功能。

实现原理： 其核心思想是监听<textarea>的@input事件。当用户输入内容时，我们首先将<textarea>的高度重置为auto，然后立即获取其scrollHeight（即元素内容所需的完整高度），并将<textarea>的高度设置为这个scrollHeight值。这样，<textarea>就会根据内容自动扩展。

以下是一个基本的实现示例：

<template>
  &lt;textarea
    ref=&quot;textareaRef&quot;
    v-model=&quot;content&quot;
    @input=&quot;adjustHeight&quot;
    class=&quot;auto-grow-textarea&quot;
    rows=&quot;1&quot;
  &gt;&lt;/textarea&gt;
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue';

const content = ref('');
const textareaRef = ref(null); // 用于引用textarea元素

function adjustHeight() {
  if (textareaRef.value) {
    textareaRef.value.style.height = 'auto'; // 重置高度以重新计算
    nextTick(() => {
      textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`;
    });
  }
}

// 组件挂载后进行首次高度调整
onMounted(() => {
  adjustHeight();
});
</script>

<style scoped>
.auto-grow-textarea {
  resize: none; /* 禁用用户手动调整大小 */
  overflow: hidden; /* 隐藏滚动条 */
  min-height: 38px; /* 设置最小高度 */
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.5;
  box-sizing: border-box; /* 确保padding和border包含在height内 */
  width: 100%;
}
</style>

在上述代码中：

• v-model="content" 实现了文本内容的双向绑定。
• ref="textareaRef" 允许我们通过textareaRef.value访问DOM元素。
• @input="adjustHeight" 在每次输入时触发高度调整。
• rows="1" 确保<textarea>初始时显示为单行。
• nextTick 用于在DOM更新后执行高度计算，确保获取到正确的scrollHeight。
• CSS样式resize: none;和overflow: hidden;是关键，它们分别禁用了用户手动调整大小的功能和隐藏了可能出现的滚动条。

集成用户输入与程序化控制

现在，我们将上述自适应<textarea>的方案与一个常见的需求结合起来：一个数值可以通过按钮（+和-）调整，也可以通过用户直接输入进行修改，并且输入框需要自适应高度。

<template>
  <div class="speed-control-container">
    <h2>速度值:</h2>
    <button @click="minus">—</button>
    &lt;textarea
      ref=&quot;textareaRef&quot;
      v-model.number=&quot;speed&quot;
      @input=&quot;adjustHeight&quot;
      class=&quot;auto-grow-textarea&quot;
      rows=&quot;1&quot;
    &gt;&lt;/textarea&gt;
    <button @click="plus">+</button>

    <p class="current-speed-display">当前速度: {{ speed }}</p>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue';

const speed = ref(20); // 初始速度值

const textareaRef = ref(null); // 用于引用textarea元素

// 调整textarea高度的函数
function adjustHeight() {
  if (textareaRef.value) {
    textareaRef.value.style.height = 'auto'; // 重置高度以重新计算
    nextTick(() => {
      textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`;
    });
  }
}

// 减少速度
function minus() {
  speed.value--;
  // 程序化修改后，也需要调整高度
  nextTick(adjustHeight);
}

// 增加速度
function plus() {
  speed.value++;
  // 程序化修改后，也需要调整高度
  nextTick(adjustHeight);
}

// 组件挂载后进行首次高度调整
onMounted(() => {
  adjustHeight();
});
</script>

<style scoped>
.speed-control-container {
  display: flex;
  align-items: center;
  gap: 10px; /* 元素间距 */
  margin-bottom: 20px;
}

h2 {
  margin: 0;
  font-size: 1.2em;
  white-space: nowrap; /* 防止标题换行 */
}

button {
  padding: 8px 15px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f0f0f0;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #e0e0e0;
}

.auto-grow-textarea {
  flex-grow: 1; /* 允许textarea占据可用空间 */
  resize: none; /* 禁用用户手动调整大小 */
  overflow: hidden; /* 隐藏滚动条 */
  min-height: 38px; /* 设置最小高度 */
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit; /* 继承父级字体 */
  font-size: 16px;
  line-height: 1.5;
  box-sizing: border-box; /* 确保padding和border包含在height内 */
  vertical-align: middle; /* 垂直居中对齐 */
  text-align: center; /* 文本居中显示 */
}

.current-speed-display {
  margin-top: 10px;
  font-size: 1.1em;
  font-weight: bold;
}
</style>

在这个完整的示例中：

• v-model.number="speed"：.number修饰符确保speed变量始终保持为数字类型，即使用户输入的是字符串，Vue也会尝试将其转换为数字。
• minus()和plus()函数在修改speed.value后，显式调用nextTick(adjustHeight)来确保在DOM更新后重新调整<textarea>的高度，以适应新的内容。
• CSS样式经过调整，使按钮和文本框能够更好地对齐和布局。

注意事项与优化

1. 初始高度设置：确保在组件挂载后（onMounted钩子中）调用一次adjustHeight，以正确设置<textarea>的初始高度。
2. v-model.number：如果你的数据模型期望的是数字类型，务必使用v-model.number，它会自动尝试将用户输入解析为数字。
3. 最小/最大高度：可以通过CSS的min-height和max-height属性来限制<textarea>的高度范围。当达到max-height时，overflow: hidden;会阻止滚动条出现，但内容将不再可见。如果需要滚动，可以移除overflow: hidden;，让浏览器处理滚动。
4. box-sizing: border-box;：这是一个重要的CSS属性，它确保padding和border包含在元素的总宽度和高度内，这对于准确计算scrollHeight至关重要。
5. 禁用手动调整：resize: none; CSS属性可以移除<textarea>右下角的用户手动调整大小的把手，保持界面一致性。
6. 性能考量：对于页面中存在大量自适应<textarea>的情况，@input事件可能会频繁触发adjustHeight。在某些极端性能敏感的场景下，可以考虑使用lodash.debounce或lodash.throttle等工具对adjustHeight函数进行节流或防抖处理，以减少不必要的DOM操作。
7. 可访问性：<textarea>本身具有良好的可访问性语义，无需像contenteditable 那样额外添加role="textbox"等属性。

总结

通过利用<textarea>元素结合Vue的v-model指令和简单的JavaScript/CSS技巧，我们可以优雅地实现自适应高度的输入框，同时确保能够无缝捕获用户输入和响应程序化修改。这种方法相比于使用contenteditable 更加健壮、易于维护，并且符合Web标准，是构建此类交互式组件的推荐实践。

到这里，我们也就讲完了《Vue自适应高度输入框技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！