css、js（vue）进行textarea自适应高度（超详细说明）

要实现一个textarea的自适应高度，可以通过CSS控制，也可以通过JavaScript来动态调整。以下是使用CSS实现的方法：

textarea {
  overflow: auto;
  resize: none;
  min-height: 20px; /* 设置最小高度 */
  max-height: 500px; /* 设置最大高度 */
}
 
textarea::-webkit-scrollbar {
  width: 12px;
}
 
textarea::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}
 
textarea::-webkit-scrollbar-thumb {
  background-color: #888;
}
 
textarea::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

这段CSS代码为textarea添加了自动滚动条样式，并通过min-height和max-height限定了textarea的高度范围。

如果你需要使用JavaScript来实现自适应高度，可以使用Vue的指令来实现：

Vue.directive('auto-grow', {
  bind(el) {
    el.addEventListener('input', () => {
      let linesCount = (el.value.match(/\n/g) || '').length + 1;
      el.setAttribute('rows', linesCount);
      el.style.height = 'auto';
      let scrollHeight = el.scrollHeight;
      el.style.height = `${scrollHeight}px`;
    });
  }
});

在Vue模板中使用这个指令：

<textarea v-auto-grow></textarea>

这段JavaScript代码定义了一个Vue指令v-auto-grow，它会在textarea的值发生变化时，自动计算行数并设置textarea的高度。