暗黑模式
Textarea 多行文本框
预览
01:38
组件名：rice-image
用户可以在文本框内输入或编辑文字。
平台兼容性
uni-app x
| Android | iOS | 鸿蒙Next | 微信小程序 | h5 |
|---|---|---|---|---|
| √ | √ | √ | √ | √ |
基础使用
通过 v-model 绑定输入的值
html
<rice-textarea v-model="value" placeholder="请输入内容" />字数统计
同时设置 show-word-limit 和 maxlength 即可显示字数的统计
html
<rice-textarea v-model="value2" placeholder="请输入内容" show-word-limit :maxlength="100" />禁用
disabled 为 true 即可禁用输入框
html
<rice-textarea placeholder="禁用的输入框" show-word-limit :maxlength="100" disabled />自动高度
auto-height 为 true 时，输入框的高度会随着内容增高
html
<rice-textarea v-model="value3" placeholder="请输入内容" auto-height />自定义样式
- 通过
bg-color可以设置输入框的背景色； color可以设置文字的颜色;font-size可以设置文字的大小；
html
<rice-textarea v-model="value4" :bg-color="themeState.isDark?'#080808':'#eeeeee'" placeholder="自定义样式" color="#cc6656" font-size="17px" />API
Props
| 属性名 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| v-model/ model-value | String | 输入框的值 | - |
| disabled | Boolean | 是否禁用 | - |
| readonly | Boolean | 是否只读，默认false | - |
| placeholder | String | 输入框为空时占位符 | - |
| placeholder-style | String | 指定 placeholder 的样式 | - |
| maxlength | Number | 最大输入长度，0和正数为合法值，非法值的时候不限制最大长度,默认-1，不限制 | - |
| cursor-spacing | Number | 指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 | - |
| cursor-color | String | 指定光标颜色，Android的微信小程序非skyline下仅支持黑和绿，iOS版仅支持十六进制颜色值 | - |
| auto-focus | Boolean | 自动获取焦点，与focus属性对比，此属性只会首次生效 | - |
| focus | Boolean | 获取焦点 | - |
| confirm-type | String | 设置键盘右下角按钮的文字，可选值：return、done、send、search、next、go | return |
| confirm-hold | Boolean | 点击键盘右下角按钮时是否保持键盘不收起 | - |
| auto-height | Boolean | 是否自动增高，设置auto-height时，style.height不生效 | - |
| cursor | Number | 指定focus时的光标位置 | - |
| selection-start | Number | 光标起始位置，自动聚集时有效，需与selection-end搭配使用 | - |
| selection-end | Number | 光标结束位置，自动聚集时有效，需与selection-satrt搭配使用 | - |
| adjust-position | Boolean | 键盘弹起时，是否自动上推页面,默认true | - |
| inputmode | String | 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示，仅支持web，默认会根据type自动适配 | - |
| hold-keyboard | Boolean | focus时，点击页面的时候不收起键盘,默认false | - |
| fixed | Boolean | 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true，仅支持微信小程序 | - |
| show-confirm-bar | Boolean | 是否显示键盘上方带有”完成“按钮那一栏，仅支持微信小程序 | - |
| disable-default-padding | Boolean | 是否去掉 iOS 下的默认内边距，仅支持微信小程序 | - |
| height | String|Number | 高度 | - |
| min-height | String|Number | 最小高度 | - |
| max-height | String|Number | 最大高度 | - |
| color | String | 输入框字体颜色 | - |
| font-size | String|Number | 输入框字体大小 | - |
| show-word-limit | Boolean | 是否显示字数统计 | - |
| border | String | 输入框的边框，可选值：surround、bottom、none | surround |
| bg-color | String | 背景颜色 | - |
| textarea-align | String | 输入框对齐方式，默认left,可选 right | center |
| textarea-style | Object | 自定义input样式 | - |
| custom-style | Object | 自定义样式 | - |
Event
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| input | 输入时触发 | (value:string) |
| focus | 输入框获得焦点时触发 | (event: UniTextareaFocusEvent) |
| blur | 输入框失去焦点时触发 | (event: UniTextareaBlurEvent) |
| keyboardheightchange | 键盘高度改变时触发 | (event: UniInputKeyboardHeightChangeEvent) |
| change | 非聚焦状态内容改变时触发（仅组件失去焦点时且用户输入改变内容才触发 | (value: string) |
| linechange | 输入框行数变化时调用 | (event: UniTextareaLineChangeEvent) |
类型定义
组件导出如下类型
ts
//组件类型
const iconRef=ref<RiceTextareaComponentPublicInstance|null>(null)