Textarea 文本域

输入多行文本。

命令行安装

npx @loongship-kit/ui add textarea

基础用法

当前输入内容: （空）

查看代码

<script setup lang="ts">
import { ref } from 'vue'
import { Textarea } from '@/components/loongship/textarea'

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

<template>
  <Textarea v-model="remarks" placeholder="Add remarks..." />
</template>

行数和长度限制

0 / 200

查看代码

<script setup lang="ts">
import { ref } from 'vue'
const report = ref('')
</script>

<template>
  <Textarea v-model="report" rows="5" maxlength="200" placeholder="Describe the incident..." />
  <span>{{ report.length }} / 200</span>
</template>

禁用与只读

表单校验

组件支持禁用和只读状态。表单校验与错误提示请参考 Form 的完整示例。

Disabled notesRead-only notes

查看代码

<template>
  <Textarea disabled model-value="Disabled notes" />
  <Textarea readonly model-value="Read-only notes" />
</template>

API

属性

属性	类型	默认值	说明
v-model	string | number	-	当前输入值
defaultValue	string | number	-	非受控模式的初始值
name	string	-	表单字段名
placeholder	string	-	占位文本
rows	number	2	初始可见行数
disabled	boolean	false	禁用文本域
readonly	boolean	false	只读文本域
required	boolean	false	必填约束
minlength	number	-	最短文本长度
maxlength	number	-	最长文本长度
autocomplete	string	-	浏览器自动填充提示
wrap	'hard' | 'soft'	'soft'	表单提交时的换行方式
aria-invalid	boolean | 'true' | 'false'	-	错误视觉和无障碍状态
class	ClassValue	-	自定义类名

事件

事件	参数	说明
update:modelValue	value: string | number	输入值改变时触发
input	InputEvent	原生输入事件
change	Event	值提交变更时触发
focus / blur	FocusEvent	获得或失去焦点时触发

类型

类型	说明
TextareaProps	Textarea 的公开 Props
TextareaValue	string | number 输入值类型

插槽

无内容插槽。