Skip to content

useTextareaAutosize

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

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

示例

Type, the textarea will grow:

用法

¥Usage

简单的例子

¥Simple example

vue
<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>

信息

建议重置 textarea 元素的滚动条样式,以避免大量文本的高度值不正确。

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

css
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.

vue
<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>