useTextareaAutosize

类别

Browser

导出大小

931 B

最近修改

7 months ago

根据内容自动更新文本区域的高度。

🌐 Automatically update the height of a textarea depending on the content.

TIP

你可能不再需要此功能。现在可以通过 CSS 原生实现文本区域自适应高度，更多信息请参见 field-sizing: content。

示例

源代码在线运行

Type, the textarea will grow:

用法

🌐 Usage

简单的例子

🌐 Simple example

<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 元素的滚动条样式，以避免大量文本的高度值不正确。

🌐 It's recommended to reset the scrollbar styles for the textarea element to avoid incorrect height values for large amounts of text.

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

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

带有 rows 属性

🌐 With rows attribute

如果你需要在 textarea 元素上支持 rows 属性，那么你应该将 styleProp 选项设置为 minHeight。

🌐 If you need support for the rows attribute on a textarea element, then you should set the styleProp option to 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>

使用 maxHeight

🌐 With maxHeight

使用 maxHeight 选项可以在保持自动调整大小行为的同时，将文本区域的高度限制为像素值。

🌐 Use the maxHeight option to cap the textarea height in pixels while keeping autosize behavior.

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

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

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