useTextareaAutosize

分类

浏览器

导出大小

922 B

上次更改

7 个月前

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

演示

源代码在线演示 (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
="What's on your mind?"
  />
</template>

信息

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

css

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

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

带 `rows` 属性

如果您的文本区域元素需要支持 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
="What's on your mind?"
    rows
="3"
  />
</template>

类型声明

显示类型声明

export interface UseTextareaAutosizeOptions extends ConfigurableWindow {
  /** Textarea element to autosize. */
  element
?: MaybeRef
<HTMLTextAreaElement | undefined | null>
  /** Textarea content. */
  input
?: MaybeRef
<string>
  /** Watch sources that should trigger a textarea resize. */
  watch
?: WatchSource
 | Array
<WatchSource
>
  /** Function called when the textarea size changes. */
  onResize
?: () => void
  /** Specify style target to apply the height based on textarea content. If not provided it will use textarea it self.  */
  styleTarget
?: MaybeRef
<HTMLElement | undefined>
  /** Specify the style property that will be used to manipulate height. Can be `height | minHeight`. Default value is `height`. */
  styleProp
?: "height" | "minHeight"
}
export declare function useTextareaAutosize
(
  options
?: UseTextareaAutosizeOptions,
): {
  textarea
: Ref
<
    HTMLTextAreaElement | null | undefined,
    HTMLTextAreaElement | null | undefined
  >
  input
: Ref
<string, string>
  triggerResize
: () => void
}
export type UseTextareaAutosizeReturn
 = ReturnType
<typeof useTextareaAutosize
>