[Vue] textarea 스크롤말고 높이가 늘어나게 처리하기

개요

textarea에서 높이는 그대로인채로 스크롤이 길어지게 경험을 제공했는데, 불친절한 경험을 줄 수 있다는 피드백을 받았다. 그래서, 글자가 길어져서 줄바꿈이 일어났을 때, 스크롤 높이를 감지해서 그만큼 높이가 길어지게 구현했다.

vue 파일

사이즈를 조절하는 함수를 실행시키는 트리거는 @keydown이나 @keyup보다 @input이 더 자연스러웠다. @input을 쓰자

 

<template>
  <textarea ref="textArea" @input="resize" class="resize-vertical overflow-y-hidden min-h-[48px]" />
</template>
<script> 
export default {
  methods: {
    resize() {
      this.$refs.textArea.style.height = "1px";
      this.$refs.textArea.style.height = this.$refs.textArea.scrollHeight + "px";
    },
  }
}
</script>