Textarea 文本域

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

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='文本域' class="p.30">
		<t-card heading="文本域" class="mb.30" sub-title="支持textarea所有属性，增加清除功能与字数统计，适配多种主题">
		</t-card>
		<t-section title='基础功能' class="tdb-tdr-mb.20"></t-section>
		<t-textarea class="mb.30-h.200" :count="true" v-model="inputVal4" @input="oninput"
			placeholder="请输入内容"></t-textarea>
		<t-section title='禁用展示' class="tdb-tdr-mb.20"></t-section>
		<t-textarea :disabled="true" class="mb.30-h.200" v-model="inputVal1" placeholder="请输入内容"></t-textarea>
		<t-section title='镂空+可清除' class="tdb-tdr-mb.20"></t-section>
		<t-textarea class="mb.30-h.200" type="success" effect='p' v-model="inputVal3" placeholder="请输入内容"></t-textarea>
		<t-section title='类型+可清除+字数统计' class="tdb-tdr-mb.20"></t-section>
		<t-textarea class="mb.30-h.200" type="primary" :count="true" effect='l' v-model="inputVal4"
			placeholder="请输入内容"></t-textarea>
		<t-section title='自动增高' class="tdb-tdr-mb.20"></t-section>
		<t-textarea class="mb.30" v-model="inputVal" placeholder="请输入内容" :auto-height="true"></t-textarea>
	</t-page>
</template>


<script>
	export default {
		data() {
			return {
				inputVal: '',
				inputVal1: '',
				inputVal2: '',
				inputVal3: '',
				inputVal4: '4',
				inputVal5: '5'
			};
		},
		methods: {
			oninput(e : UniInputEvent) {
				// console.log(e)
			}
		}
	}
</script>

Props

名称	描述	类型	默认值	可选值
name	表单的控件名称	String	''	-
value	输入框的初始内容	String	''	-
placeholder	输入框为空时占位符	String	''	-
placeholder-style	指定 placeholder 的样式	String	''	-
placeholder-class	指定 placeholder 的样式类	String	''	-
maxlength	最大输入长度	Number	0	-
autoFocus	自动获取焦点	Boolean	false	true, false
focus	获取焦点	Boolean	false	true, false
confirmType	设置键盘右下角按钮的文字	String	'return'	'return', 'send', 'search', 'next', 'go', 'done'
cursor	指定 focus 时的光标位置	Number	-	-
confirmHold	点击键盘右下角按钮时是否保持键盘不收起	Boolean	false	true, false
autoHeight	是否自动增高	Boolean	false	true, false
cursorSpacing	指定光标与键盘的距离	Number	-	-
cursorColor	指定光标颜色	String	-	-
selectionStart	光标起始位置	Number	-	-
selectionEnd	光标结束位置	Number	-	-
adjustPosition	键盘弹起时，是否自动上推页面	Boolean	true	true, false
holdKeyboard	focus 时，点击页面的时候不收起键盘	Boolean	false	true, false
modelValue	绑定的值，支持 v-model	String	''	-
count	是否显示字数统计	Boolean	false	true, false
clearabled	是否可清空输入内容	Boolean	true	true, false
border	是否显示边框	Boolean	true	true, false

Events

事件名	描述	回调参数	版本
confirm	点击完成时触发	(e: UniTextareaConfirmEvent)	-
input	当键盘输入时触发	(e: UniInputEvent)	-
linechange	输入框行数变化时调用	(e: UniTextareaLineChangeEvent)	-
blur	输入框失去焦点时触发	(e: UniTextareaBlurEvent)	-
keyboardheightchange	键盘高度发生变化时触发	(e: UniKeyboardHeightChangeEvent)	-
focus	输入框聚焦时触发	(e: UniFocusEvent)	-

Methods

名称	描述	参数
reset	重置输入框的值	(value: any)
getValue	获取输入框的当前值	-
focus	使输入框获得焦点	-