mand-mobile
Version:
A Vue.js 2.0 Mobile UI Toolkit
71 lines (50 loc) • 3.4 kB
Markdown
---
title: TextareaItem 多行输入框
preview: https://didi.github.io/mand-mobile/examples/#/TextareaItem
---
多行文本输入框 <sup class="version-after">2.5.0+</sup>
### 引入
```javascript
import { TextareaItem } from 'mand-mobile'
Vue.component(TextareaItem.name, TextareaItem)
```
### 代码演示
<!-- DEMO -->
### API
#### TextareaItem Props
| 属性 | 说明 | 类型 | 默认值 | 备注 |
| ------------------------------------------------- | ------------------------------------------------ | ------------- | ------- | -------------- |
| title | 标题 | String | - | - |
| placeholder | 占位符 | String | - | - |
| v-model | 输入内容 | String | - | |
| max-length | 可输入的字符长度 | String/Number | - | - |
| autosize | 是否可自动适应高度 | Boolean | `false` | - |
| max-height | 在`autosize=true`的情况, 文本域最长的高度 | String/Number | `'40'` | 依赖`autosize` |
| solid | title的宽度是否固定 | Boolean | `true` | |
| readonly | 是否只读 | Boolean | `false` | - |
| disabled | 是否禁用 | Boolean | `false` | - |
| clearable <sup class="version-after">2.5.3+</sup> | 是否有删除图标 | Boolean | `false` | - |
| rows | 开始显示的行数 | String/Number | `'3'` | - |
| error | 是否显示错误, 如果有内容就认定是出错, 并显示出来 | String | - | - |
| formation <sup class="version-after">2.5.13+</sup> |表单文本格式化回调方法 |Function(name, curValue, curPos): {value: curValue, range: curPos}|-|传入参数`name`为表单名称，`curValue`为表单值，`curPos`为表单光标当前所在位置<br/>返回参数`value`格式化值, `range`表单光标格式化后所在位置|
#### TextareaItem Slots
##### footer
文本域在分隔线上面部分的slot
#### TextareaItem Events
##### focus()
文本域获得焦点
##### blur()
文本域失去焦点
##### getValue()
获取文本域值
#### TextItem Events
##### @focus(name)
文本域获得焦点事件
##### @blur(name)
文本域失去焦点事件
##### @change(name, value)
文本域值变化事件
##### @keyup(name, event)
文本域按键按下事件
##### @keydown(name, event)
文本域按键释放事件