# Textarea 多行输入框

概述

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

# 支持平台

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

# 引入

以下介绍两种常用的引入方式。
第一种:在页面中引用、注册
import fuiTextarea from "@/components/firstui/fui-textarea/fui-textarea.vue"
export default {
	components:{
		fuiTextarea
	}
}
1
2
3
4
5
6
第二种:easycom组件规范
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手

如果不了解easycom,可先查看 官网文档 (opens new window)

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档API。
基础使用

通过 placeholder 属性设置提示信息。

<fui-textarea placeholder="请输入内容"></fui-textarea>
1
带标题

通过 label 属性设置标题,flexStart 属性设置标题与输入框是否顶端对齐。

<fui-textarea flexStart label="标题" placeholder="请输入内容"></fui-textarea>
1
调整高度、必填项

通过 required 属性设置是否显示必填图标,heightmin-height 属性调整输入框高度。

<fui-textarea required height="40rpx" min-height="40rpx" label="标题" placeholder="请输入内容"></fui-textarea>
1
使用v-model

双向绑定。

<fui-textarea isCounter placeholder="请输入内容" v-model="text"></fui-textarea>
1

# Slots

插槽名称 说明
default 多行输入框右侧定义显示内容
left 多行输入框左侧自定义显示内容

# Props

属性名 类型 说明 默认值 平台差异说明
required Boolean 是否显示必填图标 false -
requiredColor String 必填图标颜色 #FF2B2B -
requiredTop String 必填图标top值,flexStart为true时生效 34rpx -
label String 左侧标题 - -
labelSize Number,String 标题字体大小 32 -
labelColor String 标题字体颜色 #333 -
labelWidth Number, String 标题最小宽度,单位rpx 140 -
focus Boolean 获取焦点 false 在 H5 平台能否聚焦以及软键盘是否跟随弹出,取决于当前浏览器本身的实现。
autoHeight Boolean 是否自动增高,设置auto-height时,style.height不生效 false -
fixed Boolean 如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true false 微信小程序、百度小程序、字节跳动小程序、QQ小程序
placeholder String 输入框为空时占位符 - -
placeholderStyle String 指定 placeholder 的样式 - -
name String 输入框名称 - -
value Number,String 输入框值,vue2使用 - -
modelValue Number,String 输入框值,vue3使用 - -
disabled Boolean 是否禁用 false -
maxlength Number, String 最大输入长度,设置为 -1 的时候不限制最大长度 140 -
cursorSpacing Number 指定光标与键盘的距离,单位 px 0 App、微信小程序、百度小程序、QQ小程序
showConfirmBar Boolean 是否显示键盘上方带有”完成“按钮那一栏。 true 微信小程序、百度小程序、QQ小程序
cursor Number 指定focus时的光标位置 -1 -
selectionStart Number 光标起始位置,自动聚集时有效,需与selection-end搭配使用 -1 -
selectionEnd Number 光标结束位置,自动聚集时有效,需与selection-start搭配使用 -1 -
adjustPosition Boolean 键盘弹起时,是否自动上推页面 true App-Android(vue 页面 softinputMode 为 adjustResize 时无效)、微信小程序、百度小程序、QQ小程序
disableDefaultPadding Boolean 是否去掉 iOS 下的默认内边距 true 微信小程序2.10.0
holdKeyboard Boolean focus时,点击页面的时候不收起键盘 false 微信小程序2.8.2
height String 输入框高度 200rpx -
minHeight String 输入框最小高度 200rpx -
flexStart Boolean 标题与输入框是否顶端对齐 false -
size Number,String 输入框字体大小,单位 rpx 32 -
color String 输入框字体颜色 #333 -
textareaBorder Boolean 是否显示textarea边框,为true则borderTop,borderBottom失效 false -
borderTop Boolean 是否显示上边框 true -
topLeft Number, String 上边框left值,单位rpx 0 -
topRight Number, String 上边框right值,单位rpx 0 -
borderBottom Boolean 是否显示下边框 true -
bottomLeft Number, String 下边框left值,单位rpx 32 -
bottomRight Number, String 下边框right值,单位rpx 0 -
borderColor String 边框颜色,textareaBorder为true时生效 #EEEEEE 仅nvue端支持,非nvue端边框颜色通过css变量修改
trim Boolean 是否自动去除两端的空格 true -
textRight Boolean 输入框内容是否右对齐显示 false -
padding Array 输入框padding值:[上,右,下,左] ['28rpx', '32rpx'] -
backgroundColor String 输入框背景颜色 #FFFFFF -
marginTop Number,String 输入框margin-top值,单位rpx 0 -
isCounter Boolean 是否显示底部输入长度计数 false -
counterColor String 计数文本颜色 #B2B2B2 -
counterSize Number,String 计数文本字体大小,单位rpx 28 -

# Events

事件名 说明 回调参数
@input 当键盘输入时,触发input事件,vue2下可使用v-model指令 event=value
@update:modelValue vue3 用于组件的双向绑定,使用v-model指令即可 event=value
@focus 输入框聚焦时触发 event.detail = { value, height },height 为键盘高度
@blur 输入框失去焦点时触发 event.detail = {value, cursor}
@confirm 点击完成按钮时触发(微信小程序、百度小程序、QQ小程序) event.detail = {value}
@click 点击输入框时触发 event = {name}
@linechange 输入框行数变化时调用(字节跳动小程序不支持,nvue ios暂不支持) event.detail = {height: 0, heightRpx: 0, lineCount: 0}
@keyboardheightchange 键盘高度发生变化的时候触发此事件(微信小程序基础库2.7.0+、App 3.1.0+) event.detail = {height: height, duration: duration}

示例预览

# 示例代码地址

FirstUITextarea 多行输入框
Last Updated: 9/29/2022, 1:07:59 AM