# t-textarea

Textarea 文本域

t-textarea 组件介绍

t-textarea 是用于输入多行文本的表单组件，支持自动增高、字数统计、清除按钮等功能，适用于评论、备注、描述等多行文本输入场景。

t-textarea 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-textarea 基础用法

基础用法参考 demo/textarea/textarea.uvue。

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card title="文本域"
				class="mlr-15"
				sub-title="支持textarea所有属性，增加清除功能与字数统计，适配多种主题">
		</t-card>
		<introduction title="主题-type">
			<t-textarea class="mb-15 h-25"
						input-class="f"
						placeholder="请输入内容"
						v-model="inputVal"
						:disabled="disabled"
						@clear="clear">默认按钮</t-textarea>
			<t-button class="mb-15"
					  type="success"
					  @click="disabled=!disabled">{{disabled?'正常':'禁用'}}</t-button>
			<t-textarea :disabled="disabled"
						class="mb-15"
						placeholder="请输入内容"
						v-model="inputVal"
						:maxlength="140"
						:count="true"
						type="primary"></t-textarea>
			<t-textarea :disabled="disabled"
						class="mb-15"
						placeholder="请输入内容"
						v-model="inputVal"
						type="success"
						size="large"></t-textarea>
			<t-textarea :disabled="disabled"
						class="mb-15"
						placeholder="请输入内容"
						v-model="inputVal"
						type="info"></t-textarea>
			<t-textarea :disabled="disabled"
						class="mb-15"
						placeholder="请输入内容"
						v-model="inputVal"
						type="warning"></t-textarea>
			<t-textarea :disabled="disabled"
						:maxlength="200"
						class="mb-15"
						placeholder="请输入内容"
						v-model="inputVal"
						type="error"></t-textarea>
		</introduction>
		<introduction title="主题-effect">
			<t-textarea class="mb-15"
						placeholder="请输入内容"
						v-model="inputVal"
						effect="normal"
						type="primary"></t-textarea>
			<t-textarea class="mb-15"
						placeholder="请输入内容"
						v-model="inputVal"
						effect="dark"
						type="success"></t-textarea>
			<t-textarea class="mb-15"
						placeholder="请输入内容"
						v-model="inputVal"
						effect="disabled"
						type="info"></t-textarea>
			<t-textarea class="mb-15"
						placeholder="请输入内容"
						v-model="inputVal"
						effect="light"
						type="warning"></t-textarea>
			<t-textarea class="mb-15"
						placeholder="请输入内容"
						v-model="inputVal"
						effect="plain"
						:border="true"
						type="warning"></t-textarea>
		</introduction>
		<introduction title="主题-size">
			<t-textarea class="mb-15"
						placeholder="请输入内容"
						v-model="inputVal"
						size="large"
						type="success"></t-textarea>
			<t-textarea class="mb-15"
						placeholder="请输入内容"
						v-model="inputVal"
						size="medium"
						type="info"></t-textarea>
			<t-textarea class="mb-15"
						placeholder="请输入内容"
						v-model="inputVal"
						size="small"
						type="warning"></t-textarea>
			<t-textarea class="mb-15"
						placeholder="请输入内容"
						v-model="inputVal"
						size="mini"
						type="error"></t-textarea>
		</introduction>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const inputVal = ref('8151');
	const disabled = ref(false);

	const clear = () => {
		console.log('清除');
	}
</script>

t-textarea Props

属性名	说明	类型	默认值
modelValue	绑定的值	string	''
placeholder	输入框为空时占位文本	string	''
maxlength	最大输入长度	number	-1（无限制）
count	是否显示字数统计	boolean	false
clearabled	是否显示清除按钮	boolean	true
clearIcon	清除按钮的图标名称	string	'close-circle-line'
clearClass	清除按钮图标样式	string	''
inputClass	输入框样式	string	''
autoHeight	是否自动增高	boolean	true
disabled	是否禁用	boolean	false
autoFocus	自动获取焦点	boolean	false
focus	是否聚焦	boolean	false
cursorSpacing	指定光标与键盘的距离	number	0
cursorColor	指定光标颜色	string	''
confirmType	设置键盘右下角按钮的文字，可选 return、send、search、next、go、done	string	'done'
confirmHold	点击键盘右下角按钮时是否保持键盘不收起	boolean	false
cursor	指定 focus 时的光标位置	number	0
selectionStart	光标起始位置	number	-1
selectionEnd	光标结束位置	number	-1
adjustPosition	键盘弹起时，是否自动上推页面	boolean	true
holdKeyboard	focus 时，点击页面的时候不收起键盘	boolean	false
inputmode	输入模式，可选 none、text、decimal、numeric、tel、search、email、url	string	'text'
showScrollbar	是否显示滚动条	boolean	true
border	是否显示边框	boolean	false
name	表单的控件名称	string	''
password	是否密码显示	boolean	false
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
effect	组件显示主题	string	'normal'
size	组件尺寸	string	'medium'

t-textarea Events

事件名	说明	回调参数
update:modelValue	值改变时触发	string
input	当键盘输入时触发	event
blur	输入框失去焦点时触发	event
focus	输入框聚焦时触发	event
keyboardheightchange	键盘高度发生变化时触发	event
confirm	点击完成时触发	event
linechange	输入框行数变化时调用	event
clear	清除文本时触发	-
click	点击时触发	event

外部类

类名	说明
clear-class	清除按钮样式
input-class	输入框样式