# 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>

带标题

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

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

调整高度、必填项

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

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

使用v-model

双向绑定。

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

# 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	-
disabledStyle V2.1.0+	Boolean	是否启用禁用状态下的样式，与正常输入框样式略有区别，仅disabled为true时有效	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	边框颜色	#EEEEEE	非Nvue端默认可通过css变量（--fui-color-border）修改颜色
radius V1.9.0+	Number, String	圆角值，单位rpx，设置圆角则属性borderTop，borderBottom失效	0	-
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}

示例预览

# 示例代码地址

Textarea 多行输入框

← Switch 开关 Rate 评分 →