Vue中实现自适应高度输入框与用户输入捕获的最佳实践

<template>
  <textarea
    ref="textareaRef"
    v-model="content"
    @input="adjustHeight"
    class="auto-grow-textarea"
    rows="1"
  ></textarea>
</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>

<template>
  <div class="speed-control-container">
    <h2>速度值:</h2>
    <button @click="minus">—</button>
    <textarea
      ref="textareaRef"
      v-model.number="speed"
      @input="adjustHeight"
      class="auto-grow-textarea"
      rows="1"
    ></textarea>
    <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>