主题
Textarea 多行输入框
用于多行文本输入，支持自动高度、标题和字数统计。
支持平台
以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 多行备注 -->
<fui-textarea v-model="remark" label="备注" placeholder="请输入备注" isCounter />在页面数据中声明 remark。Vue 2 使用 value / input，Vue 3 使用 modelValue / update:modelValue。
属性
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| required | Boolean | 显示必填标记 | false |
| requiredColor | String | 必填标记颜色 | #FF2B2B |
| requiredTop | String | 顶部对齐时必填标记的偏移 | 34rpx |
| label | String | 左侧标题 | - |
| labelSize | Number / String | 标题字号，单位 rpx | 32 |
| labelColor | String | 标题颜色 | #333 |
| labelWidth | Number / String | 标题最小宽度，单位 rpx | 140 |
| focus | Boolean | 是否获取焦点 | false |
| autoHeight | Boolean | 是否自动增高，开启时固定高度不生效 | false |
| fixed | Boolean | 是否位于 fixed 区域 | false |
| placeholder | String | 占位文字 | - |
| placeholderStyle | String | 占位文字样式 | - |
| name | String | 输入框名称 | - |
| value | Number / String | Vue 2 绑定值 | - |
| modelValue | Number / String | Vue 3 绑定值 | - |
| disabled | Boolean | 是否禁用 | false |
| disabledStyle | Boolean | 禁用时是否启用禁用样式 | false |
| maxlength | Number / String | 最大长度，-1 不限制 | 140 |
| cursorSpacing | Number | 光标与键盘距离，单位 px | 0 |
| showConfirmBar | Boolean | 是否显示键盘上方的完成栏 | true |
| cursor | Number | 聚焦时的光标位置 | -1 |
| selectionStart | Number | 选区起始位置 | -1 |
| selectionEnd | Number | 选区结束位置 | -1 |
| adjustPosition | Boolean | 键盘弹起时是否上推页面 | true |
| disableDefaultPadding | Boolean | 是否移除 iOS 默认内边距 | true |
| holdKeyboard | Boolean | 聚焦时点击页面是否保持键盘 | false |
| height | String | 输入框高度 | 200rpx |
| minHeight | String | 最小高度 | 200rpx |
| flexStart | Boolean | 标题与输入框是否顶部对齐 | false |
| size | Number / String | 输入文字大小，单位 rpx | 32 |
| color | String | 输入文字颜色 | #333 |
| textareaBorder | Boolean | 是否显示整体边框 | false |
| borderTop | Boolean | 是否显示上边线 | true |
| topLeft | Number / String | 上边线左侧偏移，单位 rpx | 0 |
| topRight | Number / String | 上边线右侧偏移，单位 rpx | 0 |
| borderBottom | Boolean | 是否显示下边线 | true |
| bottomLeft | Number / String | 下边线左侧偏移，单位 rpx | 32 |
| bottomRight | Number / String | 下边线右侧偏移，单位 rpx | 0 |
| borderColor | String | 边框颜色 | #EEEEEE |
| radius | Number / String | 圆角，单位 rpx | 0 |
| trim | Boolean | 是否去除输入值首尾空格 | true |
| textRight | Boolean | 输入内容是否右对齐 | false |
| padding | Array | 容器内边距 | ['28rpx', '32rpx'] |
| backgroundColor | String | 背景色 | #FFFFFF |
| marginTop | Number / String | 上外边距，单位 rpx | 0 |
| isCounter | Boolean | 是否显示字数统计 | false |
| counterColor | String | 计数文字颜色 | #B2B2B2 |
| counterSize | Number / String | 计数字号，单位 rpx | 28 |
整体边框或圆角生效时，上下边线配置不生效。
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| input | Vue 2 输入与双向绑定 | 输入值 |
| update:modelValue | Vue 3 双向绑定 | 输入值 |
| focus | 聚焦 | 原始事件，detail 包含 value 和受平台支持的 height |
| blur | 失焦 | 原始事件，detail 包含 value、cursor |
| confirm | 点击键盘确认 | 原始事件，detail 包含 value |
| click | 点击输入区域 | { name } |
| linechange | 行数变化 | 原始事件，detail 包含 height、heightRpx、lineCount |
| keyboardheightchange | 键盘高度变化 | 原始事件，detail 包含 height、duration |
插槽和平台说明
left 插槽位于输入框左侧，默认插槽位于右侧。键盘、选区及行数变化事件的支持范围取决于 uni-app 平台；非 nvue 默认边框色可通过 --fui-color-border 调整。
插槽
| 插槽 | 说明 |
|---|---|
| default | 输入框右侧的自定义内容 |
| left | 左侧自定义内容 |