useTextareaAutosize

コンテンツに応じてテキストエリアの高さを自動的に更新します。

使用法

シンプルな例

<script setup lang="ts">
import { useTextareaAutosize } from '@vueuse/core'

const { textarea, input } = useTextareaAutosize()
</script>

<template>
  <textarea
    ref="textarea"
    v-model="input"
    class="resize-none"
    placeholder="What's on your mind?"
  />
</template>

::: info

大量のテキストに対して不正確な高さの値を避けるために、テキストエリア要素のスクロールバーのスタイルをリセットすることをお勧めします。

textarea {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

textarea::-webkit-scrollbar {
  display: none;
}

:::

rows 属性を使用する場合

テキストエリア要素で rows 属性をサポートする必要がある場合は、styleProp オプションを minHeight に設定する必要があります。

<script setup lang="ts">
import { useTextareaAutosize } from '@vueuse/core'

const { textarea, input } = useTextareaAutosize({ styleProp: 'minHeight' })
</script>

<template>
  <textarea
    ref="textarea"
    v-model="input"
    class="resize-none"
    placeholder="What's on your mind?"
    rows="3"
  />
</template>