Textarea (文本域)

于输入多行文本的组件，支持多种配置，包括自动增高、光标颜色、选择文本等。

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

html

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

<script>
	export default {
		data() {
			return {
				inputVal: '8151',
				disabled: false
			};
		},
		methods: {
			clear() {
				console.log('清除')
			}
		}
	}
</script>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
count	`Boolean`	`false`	是否显示字数统计
modelValue	`String`	``	绑定的值
clearIcon	`String`	`closes-circle-line`	清除按钮的图标名称
clearClass	`String`	``	清除按钮图标样式
inputClass	`String`	``	输入框样式
clearabled	`Boolean`	`true`	是否显示清除按钮
border	`Boolean`	`false`	是否显示边框
name	`String`	``	表单的控件名称和官方表单组件配合使用，
password	`Boolean`	`false`	是否密码显示
placeholder	`String`	``	输入框为空时占位文本
placeholderStyle	`String`	``	指定 placeholder 的样式
placeholderClass	`String`	``	指定 placeholder 的样式类
maxlength	`Number`	`1`	最大输入长度
cursorSpacing	`Number`	`0`	指定光标与键盘的距离
cursorColor	`String`	``	指定光标颜色
autoFocus	`Boolean`	`false`	自动获取焦点
confirmType	`String`	`done`	设置键盘右下角按钮的文字	`return`: 换换行 `send`: 发送 `search`: 搜索 `next`: 下一个 `go`: 前往 `done`: 完成
confirmHold	`Boolean`	`false`	点击键盘右下角按钮时是否保持键盘不收起
autoHeight	`Boolean`	`true`	是否自动增高，设置auto-height时，style.height不生效
cursor	`Number`	`0`	指定 focus 时的光标位置
selectionStart	`Number`	`1`	光标起始位置
selectionEnd	`Number`	`1`	光标结束位置
adjustPosition	`Boolean`	`true`	键盘弹起时，是否自动上推页面
holdKeyboard	`Boolean`	`false`	focus 时，点击页面的时候不收起键盘
inputmode	`String`	`text`	是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的 web 和 app-vue 平台中可使用本属性。	`none`: 无虚拟键盘。在应用程序或者站点需要实现自己的键盘输入控件时很有用。 `text`: 使用用户本地区域设置的标准文本输入键盘。 `decimal`: 小数输入键盘，包含数字和分隔符（通常是“ . ”或者“ , ”），设备可能也可能不显示减号键。 `numeric`: 数字输入键盘，所需要的就是 0 到 9 的数字，设备可能也可能不显示减号键。 `tel`: 电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键。表单输入里面的电话输入通常应该使用。 `search`: 为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”，也可能还有其他的优化。 `email`: 为邮件地址输入优化的虚拟键盘，通常包含""符号和其他优化。表单里面的邮件地址输入应该使用。 `url`: 为网址输入优化的虚拟键盘，比如，“/”键会更加明显、历史记录访问等。表单里面的网址输入通常应该使用。
showScrollbar	`Boolean`	`true`	showScrollbar是否显示滚动条

事件

名称	返回参数	说明
click	`(e : UniPointerEvent)`	-
input	`(e: UniInputEvent)`	当键盘输入时触发
blur	`(e: UniTextareaBlurEvent)`	输入框失去焦点时触发
focus	`(e: UniFocusEvent)`	输入框聚焦时触发
keyboardheightchange	`(e: UniKeyboardHeightChangeEvent)`	键盘高度发生变化时触发
confirm	`(e: UniTextareaConfirmEvent)`	点击完成时触发
linechange	`(event: UniTextareaLineChangeEvent) => void`	输入框行数变化时调用
update:modelValue	-	-
clear	-	清除文本时触发

方法

名称	参数	返回值	说明
linechange	-	-
onfocus	-	-
blur	-	-
keyboardheightchange	-	-
confirm	-	-
clear	-	-	文本清空时触发
input	-	-

Textarea (文本域) ​

支持平台 ​

示例代码 ​

属性 ​

事件 ​

方法 ​

Textarea (文本域)

支持平台

示例代码

属性

事件

方法