# TextArea 文本域

### 介绍

文本框内输入或编辑文字，支持限制输入数量。

### 安装

``` javascript
import { createApp } from 'vue';
//vue
import { TextArea } from '@nutui/nutui';
//taro
import { TextArea } from '@nutui/nutui-taro';

const app = createApp();
app.use(TextArea);

```
## 代码演示

### 基础用法


```html
<nut-textarea v-model="value" />
```
``` javascript
import { ref } from 'vue';

export default {
  setup() {
    const value = ref('');
    return { value };
  },
};
```

### 显示字数统计


```html
<nut-textarea v-model="value" limit-show max-length="20" />
```

### 高度自定义，拉伸


```html
<nut-textarea v-model="value" rows="10" autosize />
```
### 只读、禁用


```html
<nut-textarea readonly model-value="textarea只读状态" />
<nut-textarea disabled model-value="textarea禁用状态" limit-show max-length="20" />
```


### Prop

| 参数        | 说明                                             | 类型           | 默认值         |
|-------------|--------------------------------------------------|----------------|----------------|
| v-model     | 输入值，支持双向绑定                             | String         | -              |
| placeholder | 设置占位提示文字                                 | String         | `'请输入内容'` |
| max-length  | 限制最长输入字符                                 | String、Number | -              |
| rows        | textarea的高度                                   | String、Number | `2`            |
| limit-show  | textarea是否展示输入字符。须配合`max-length`使用 | Boolean        | `false`        |
| autosize    | 高度是否可拉伸                                   | Boolean        | `false`        |
| text-align  | 文本位置,可选值`left`,`center`,`right`           | String         | `left`         |
| readonly    | 只读属性                                         | Boolean        | `false`        |
| disabled    | 禁用属性                                         | Boolean        | `false`        |


### Event

| 名称   | 说明           | 回调参数    |
|--------|----------------|-------------|
| change | 输入框值改变时触发 | value       |
| focus  | 聚焦时触发     | event       |
| blur   | 失焦时触发     | {value,event} |