# tui-textarea 多行输入框

介绍

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

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiTextarea from "@/components/thorui/tui-textarea/tui-textarea"
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>

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

# 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
clearable Boolean 输入内容后是否显示清除按钮 false
clearSize Number 清除按钮大小,单位px 15
clearColor String 清除按钮颜色 #bfbfbf
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
confirmType String 设置键盘右下角按钮的文字,仅在 type="text" 时生效。与官方属性一致 done
showConfirmBar Boolean 是否显示键盘上方带有”完成“按钮那一栏。与官方属性一致 true
cursor Number 指定focus时的光标位置。与官方属性一致 -1
selectionStart Number 光标起始位置,自动聚集时有效,需与selection-end搭配使用。与官方属性一致 -1
selectionEnd Number 光标结束位置,自动聚集时有效,需与selection-start搭配使用。与官方属性一致 -1
adjustPosition Boolean 键盘弹起时,是否自动上推页面。与官方属性一致 true
holdKeyboard Boolean focus时,点击页面的时候不收起键盘。与官方属性一致 false
autoBlur Boolean 键盘收起时,是否自动失去焦点。与官方属性一致 false
height String textarea高度 200rpx
minHeight String textarea最小高度 200rpx
flexStart Boolean 标题与输入框是否顶端对齐 false
size Number 输入框字体大小,单位rpx 32
color String 输入框字体颜色 #333
textareaBorder Boolean 是否显示 textarea边框 false
isFillet Boolean textarea是否显示为圆角 false
borderTop Boolean 是否显示上边框 false
borderBottom Boolean 是否显示下边框 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

事件名 说明 回调参数
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}

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码