Textarea 多行输入 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

用于接受多行文本。

规则

支持通过键盘或者剪切板输入文本。
通过光标可以在垂直或者水平方向进行移动。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import {OkTextarea} from '@21cnfe/vui'  
Vue.component('OkTextarea', OkTextarea)

代码演示

TextareaItem 多行输入 textareas

基本用法通过 rows 的值设置展示行数，labelNumber 设置 title 宽度

<ok-textarea placeholder="默认" title="默认" :rows="3" :labelNumber="7" v-model="Demo"></ok-textarea>

清除功能添加 clear 属性启用清除功能

<ok-textarea placeholder="带有清除功能" title="clear" v-model="clearDemo"  :rows="1" clear></ok-textarea>

计数功能多行时设置 count 启用计数功能

<ok-textarea placeholder="带有计数功能" v-model="count" title="计数" :rows="3" :count="100"></ok-textarea>

不可用状态 disabled 和 editable 可设置不可用状态

<ok-textarea placeholder="不可用" title="不可用" v-model="Demo" disabled></ok-textarea>
<ok-textarea placeholder="不可用" title="不可用" v-model="Demo" editable="false"></ok-textarea>

API

属性	说明	类型	默认值
`v-model`	绑定值	String	`--`
`placeholder`	placeholder	String	`--`
`editable`	是否可编辑	Boolean	`true`
`disabled`	是否禁用	Boolean	`false`
`clear`	是否带清除功能(仅`editable`为`true`,`disabled`为`false`才生效)	Boolean	`false`
`rows`	显示几行	Number	`1`
`count`	计数功能,兼具最大长度,默认为0,代表不开启计数功能（添加count并且rows>1）	Number	`--`
`error`	报错样式	Boolean	`false`
`labelNumber`	定宽枚举值：`num * @input-label-width: 34px`，可用`2-7`之间的数字，一般(不能保证全部)能对应显示出相应个数的中文文字(不考虑英文字符)	Number	`5`
`title`	文案说明	String	`--`
`raw`	使用原生textarea，不包含多余扩展，设置autoHeight时支持高度自适应	Boolean	`false`

Event

事件名称	说明	回调参数
`onBlur`	blur 事件触发的回调函数	`--`
`onFocus`	focus 事件触发的回调函数	`--`
`onChange`	change 事件触发的回调函数	`--`

1. Textarea 多行输入 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

Textarea 多行输入 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

规则

引入方式

代码演示

API

Event

Textarea 多行输入 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用