# tui-textarea 多行输入框会员组件

介绍

多行输入框组件是对原生textarea组件的增强，内置了常用布局样式，同时包含 textarea 所有功能。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiTextarea from "@/components/thorui/tui-textarea/tui-textarea.vue"
export default {
	components:{
		tuiTextarea
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
✓	✓	✓	✓	✓	✓	✓	✓

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-textarea": "/components/thorui/tui-textarea/tui-textarea"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

默认使用

<tui-textarea placeholder="请输入内容"></tui-textarea>

带标题

通过 label 属性设置标题。

<tui-textarea flexStart label="简介" placeholder="请输入简介"></tui-textarea>

调整高度

通过 height 属性设置高度，min-height 属性设置最小高度。

<tui-textarea height="40rpx" min-height="40rpx" label="简介" placeholder="请输入一句话简介"></tui-textarea>

输入长度计数

通过 isCounter 属性设置是否显示底部输入长度计数。

<!--uni-app-->
<tui-textarea isCounter placeholder="请输入简介" v-model="intro"></tui-textarea>

// data 数据 及 方法
export default {
 data() {
 	return {
 		intro:''
 	}
 },
 methods: {
 	
 }
}

<!--微信小程序-->
<tui-textarea isCounter placeholder="请输入简介" model:value="{{intro}}"></tui-textarea>

// data 数据 及 方法
Page({
  data: {
    intro:''
  }
})

// Make sure to add code blocks to your code group

# Slots

插槽名称	说明
left	textarea输入框左侧显示内容
right	textarea输入框右侧显示内容

# Props

属性名	类型	说明	默认值
required	Boolean	是否显示必填标识（*号）	false
requiredColor	String	必填标识（*号）颜色	#EB0909
requiredTop	String	必填标识（*号）top值，flexStart为true时生效	32rpx
label	String	左侧标题	-
labelSize	Number	标题字体大小,单位rpx	32
labelColor	String	标题颜色	#333
labelWidth	Number	标题最小宽度，单位rpx	140
focus	Boolean	获取焦点	false
autoHeight	Boolean	是否自动增高，设置auto-height时，style.height不生效	false
fixed	Boolean	如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true	false
placeholder	String	输入框为空时占位符	-
placeholderStyle	String	指定 placeholder 的样式	-
name	String	输入框名称	-
value	Number,String	输入框的初始内容	-
modelValue	Number,String	输入框的初始内容，vue3使用	-
type	String	与官方textarea type属性一致	text
password	Boolean	是否是密码类型	false
disabled	Boolean	是否禁用	false
maxlength	Number	最大输入长度，设置为 -1 的时候不限制最大长度	140
cursorSpacing	Number	指定光标与键盘的距离，单位 px 。与官方属性一致	0
showConfirmBar	Boolean	是否显示键盘上方带有”完成“按钮那一栏。与官方属性一致	true
cursor	Number	指定focus时的光标位置。与官方属性一致	-1
selectionStart	Number	光标起始位置，自动聚集时有效，需与selection-end搭配使用。与官方属性一致	-1
selectionEnd	Number	光标结束位置，自动聚集时有效，需与selection-start搭配使用。与官方属性一致	-1
adjustPosition	Boolean	键盘弹起时，是否自动上推页面。与官方属性一致	true
holdKeyboard	Boolean	focus时，点击页面的时候不收起键盘。与官方属性一致	false
height	String	textarea高度	200rpx
minHeight	String	textarea最小高度	200rpx
flexStart	Boolean	标题与输入框是否顶端对齐	false
size	Number	输入框字体大小，单位rpx	32
color	String	输入框字体颜色	#333
textareaBorder	Boolean	是否显示 textarea边框，设置为true，则borderTop、borderBottom属性失效	false
borderColor V2.8.0+	String	输入框边框颜色	rgba(0, 0, 0, 0.1)
radiusV2.8.0+	Number,String	输入框圆角值，单位rpx	0
borderTop	Boolean	是否显示上边框，仅 textareaBorder 为false时有效	true
borderBottom	Boolean	是否显示下边框，仅 textareaBorder 为false时有效	true
lineLeft	Boolean	下边框线条是否有左偏移距离，Nvue端暂不支持	true
trim	Boolean	是否自动去除内容两端的空格	true
textRight	Boolean	输入框内容是否右对齐显示	false
padding	String	输入框padding值	26rpx 30rpx
backgroundColor	String	输入框背景颜色	#FFFFFF
marginTop	Number	输入框margin-top值，单位rpx	0
isCounter	Boolean	是否显示底部输入长度计数	false
counterColor	String	计数文本颜色	#999
counterSize	Number	计数文本大小，单位rpx	28

# Events

注：uni-app端绑定事件使用@前缀，如@input；微信小程序原生使用bind前缀，如bindinput

事件名	说明	回调参数
input	当键盘输入时，触发input事件	uni-app：event=value，微信小程序：event.detail = {value}
update:modelValue vue3	用于组件的双向绑定,使用v-model指令即可，仅uni-app	event=value
focus	输入框聚焦时触发	event.detail = { value, height }，height 为键盘高度
blur	输入框失去焦点时触发	event.detail = {value, cursor}
confirm	点击完成按钮时触发	event.detail = {value: value}
click	输入框点击事件	event.detail = {name: name}
linechange	输入框行数变化时调用，与官方一致	event.detail = {height: 0, heightRpx: 0, lineCount: 0}
keyboardheightchange	键盘高度发生变化的时候触发此事件，与官方一致	event.detail = {height: height, duration: duration}