# lc-textarea

> Light 文本域组件，可自定义样式

## [Demo](https://h5.m.taobao.com/trip/wx-detection-demo/button/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Fwx-detection-demo%2Fbutton%2Findex.weex.js)

<img src="https://img.alicdn.com/tfs/TB1aMRGhgvD8KJjy0FlXXagBFXa-562-1000.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB1b0tMhf6H8KJjy0FjXXaXepXa-200-200.png" width="160"/>

## 使用方法

```vue
<template>
  <lc-textarea :max="20" placeholder="提示" @on-focus="onEvent('focus')" @on-blur="onEvent('blur')"></lc-textarea>
  <lc-textarea :max="20" label="标题" placeholder="提示" @on-focus="onEvent('focus')" @on-blur="onEvent('blur')"></lc-textarea>   
</template>

<script>
  import { LcTextarea, WxcCell, LcInput } from '../../index';
  import Title from '../_mods/title.vue';
  import Category from '../_mods/category.vue';
  import { setTitle } from '../_mods/set-nav';

  const modal = weex.requireModule('modal');
  export default {
    components: { Title, Category, LcTextarea, WxcCell, LcInput },
    methods: {
      onEvent (event) {
        console.log('on', event)
      }   
    }
  }
</script>

```
更详细代码可以参考 [这里](https://github.com/alibaba/weex-ui/blob/master/button/loading/index.vue)

### 可配置参数
| Prop | Type | Required | Default | Description |
| ---- |:----:|:---:|:-------:| :----------:|
| **`label`** | `string` | `N` | `-` | 标题文字 |
| **`showCounter`** | `boolean` | `N` | `true` | 是否显示计数器 |
| **`max`** | `number` | `N` | `-` | 最大输入字符数 |
| **`value`** | `string` | `N` | `-` | 值 |
| **`name`** | `string` | `N` | `-` |  |
| **`placeholder`** | `string` | `N` | `-` | 占位文字 |
| **`readonly`** | `boolean` | `N` | `false` | 是否只读 |
| **`rows`** | `number` | `N` | `3` | 行数 |
| **`cols`** | `number` | `N` | `30` | 列数 |
| **`height`** | `number` | `N` | `-` | 可输入区域的高度 |
| **`autocomplete`** | `string` | `N` | `off` | 是否自动补全 |
| **`autocapitalize`** | `string` | `N` | `off` | 是否只读 |
| **`autocorrect`** | `string` | `N` | `off` | 是否自动校验 |
| **`spellcheck`** | `string` | `N` | `off` | 是否开启拼写检查 |
| **`hasTopBorder`** | `boolean` | `N` | `true` | 是否有上边框 |
| **`cellStyle`** | `object` | `N` | `{}` | 文本域自定义样式 |
| **`titleStyle`** | `object` | `N` | `{}` | 可输入区域自定义样式 |
| **`labelWidth`** | `string` | `N` | `-` | 标题宽度 |