Textarea 多行输入框

多行文本输入框。

<script setup lang="ts">
  import { ref } from 'vue'
  import { Textarea } from '@hina-ui/vue'

  const text = ref('转学第一天，我在天台遇见了那个抱着旧相机的少女。她说这台相机拍得到明天。')
</script>

<template>
  <Textarea v-model="text" aria-label="作品简介" autosize class="w-full max-w-md" />
</template>

vue

用法

import { Textarea } from '@hina-ui/vue'

多行文本输入框渲染为原生 textarea，v-model 绑定文本。默认高度为三行，右下角可以纵向拉伸。未声明的属性都会传给 textarea，placeholder、maxlength、name 等属性照常可用。

<script setup lang="ts">
  import { ref } from 'vue'
  import { Textarea } from '@hina-ui/vue'

  const text = ref('')
</script>

<template>
  <Textarea v-model="text" aria-label="评论" placeholder="输入评论" class="w-full max-w-md" />
</template>

vue

示例

自动高度

设置 autosize 后高度随内容增减，拉伸把手隐藏。传入对象可以限定行数范围，超过 maxRows 后内部滚动。

<script setup lang="ts">
  import { ref } from 'vue'
  import { Stack, Textarea } from '@hina-ui/vue'

  const free = ref('')
  const bounded = ref('')
</script>

<template>
  <Stack class="w-full max-w-md">
    <Textarea v-model="free" aria-label="不限行数" autosize placeholder="随内容增高，不限行数" />
    <Textarea
      v-model="bounded"
      aria-label="两到五行"
      :autosize="{ minRows: 2, maxRows: 5 }"
      placeholder="最少两行，最多五行，超出后在框内滚动"
    />
  </Stack>
</template>

vue

尺寸

三档尺寸与输入框相同，只有一行内容时高度与同档输入框一致。

<script setup lang="ts">
  import { Stack, Textarea } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-full max-w-md">
    <Textarea size="sm" :rows="1" aria-label="小号" placeholder="小号" />
    <Textarea size="md" :rows="1" aria-label="中号" placeholder="中号" />
    <Textarea size="lg" :rows="1" aria-label="大号" placeholder="大号" />
  </Stack>
</template>

vue

形态

primary 带边框、背景与阴影；secondary 使用浅色背景；bare 背景透明，不绘制边框、阴影、悬停底色或容器聚焦环，尺寸与内边距仍由原有设置控制。

bare 保留禁用状态与 aria-invalid；错误信息可由 FormField 显示。

<script setup lang="ts">
  import { Textarea, Stack } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-full max-w-md">
    <Textarea variant="primary" aria-label="primary" placeholder="primary" />
    <Textarea variant="secondary" aria-label="secondary" placeholder="secondary" />
    <Textarea variant="bare" aria-label="bare" placeholder="bare" />
  </Stack>
</template>

vue

状态

invalid 标出校验未通过，disabled 不可编辑。

<script setup lang="ts">
  import { Stack, Textarea } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-full max-w-md">
    <Textarea invalid aria-label="校验未通过" model-value="简介不能少于二十个字。" />
    <Textarea disabled aria-label="已禁用" model-value="审核期间不能修改简介。" />
  </Stack>
</template>

vue

在表单中

放进 FormField 后，标签通过 for 指向文本域，说明与错误信息由字段渲染并关联到它；校验规则与提交交给 Form。

<script setup lang="ts">
  import { reactive, ref } from 'vue'
  import * as v from 'valibot'
  import { Button, Form, FormField, Text, Textarea } from '@hina-ui/vue'

  const schema = v.object({
    review: v.pipe(
      v.string('请写下评价'),
      v.trim(),
      v.minLength(20, '评价至少 20 个字'),
      v.maxLength(500, '评价不超过 500 个字'),
    ),
  })

  const values = reactive({ review: '' })
  const saved = ref(false)

  async function save() {
    await new Promise(resolve => setTimeout(resolve, 600))
    saved.value = true
  }
</script>

<template>
  <Form v-slot="{ submitting }" :values="values" :rules="schema" class="w-80" @submit="save">
    <FormField name="review" label="评价" description="20 到 500 个字" required>
      <Textarea v-model="values.review" />
    </FormField>
    <Button type="submit" :loading="submitting" class="self-start">发表</Button>
    <Text v-if="saved" tone="muted" size="sm">评价已发表。</Text>
  </Form>
</template>

vue

行为

悬停、聚焦、错误与禁用的表现与 Input 相同。
自动高度在输入与 v-model 变化时重新计算，行数下限默认取 rows。
内容超出可见行数时在框内滚动，滚动条与 ScrollArea 相同。
点击框内文字之外的空白也会聚焦。

API

Props

属性	类型	默认值	说明
`variant`	`'primary' \| 'secondary' \| 'bare'`	`'primary'`	形态
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`rows`	`number`	`3`	行数
`autosize`	`boolean \| { minRows?: number; maxRows?: number }`	`false`	是否随内容调整高度
`resize`	`'none' \| 'vertical'`	`'vertical'`	是否可以拉伸，自动高度时不可拉伸
`invalid`	`boolean`	`false`	是否校验未通过
`disabled`	`boolean`	`false`	是否禁用
`class`	`string`	—	追加至根元素的类名

事件	参数	说明
`update:modelValue`	`value: string`	文本变化

实例

input 暴露原生 HTMLTextAreaElement，可读取选区或调用 setSelectionRange()；focus() 聚焦输入框且不滚动页面。仅在客户端挂载后可用。

用法

示例

自动高度

尺寸

形态

状态

在表单中

行为

无障碍

API

Props

实例