useTextareaAutosize

类别

Browser

导出体积

931 B

上次更改

7 minutes ago

根据内容自动更新 textarea 的高度。

示例

源码 playground (beta)

输入内容，文本框会自动增长：

用法

简单示例

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
="想说点什么？"
  />
</template>

INFO

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

css

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

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

使用 `rows` 属性

如果你需要在 textarea 元素上支持 rows 属性，则应将 styleProp 选项设置为 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
="你在想什么？"
    rows
="3"
  />
</template>

使用 `maxHeight`

使用 maxHeight 选项可在保持自动调整大小行为的同时，以像素为单位限制 textarea 的高度。

vue

<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
="你在想什么？"
    rows
="3"
  />
</template>

类型声明

export interface UseTextareaAutosizeOptions extends ConfigurableWindow {
  /** 自动调整大小的文本区域元素。 */
  element
?: MaybeRef
<HTMLTextAreaElement | undefined | null>
  /** 文本区域的内容。 */
  input
?: MaybeRef
<string>
  /** Maximum autosized height in pixels. */
  maxHeight
?: number
  /** Watch sources that should trigger a textarea resize. */
  watch
?: WatchSource
 | MultiWatchSources

  /** 当文本区域大小发生变化时调用的函数。 */
  onResize
?: () => void
  /** 指定样式目标以根据文本区域内容应用高度。如果未提供，将使用文本区域本身。 */
  styleTarget
?: MaybeRef
<HTMLElement | undefined>
  /** 指定用于调整高度的样式属性。可以是 `height | minHeight`。默认值为 `height`。 */
  styleProp
?: "height" | "minHeight"
}
export interface UseTextareaAutosizeReturn {
  textarea
: Ref
<HTMLTextAreaElement | undefined | null>
  input
: Ref
<string>
  triggerResize
: () => void
}
export declare function useTextareaAutosize
(
  options
?: UseTextareaAutosizeOptions,
): UseTextareaAutosizeReturn