---
nav: default
---
### XTextarea
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Fx-textarea"/>
<a href="demo/#/component/x-textarea" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/x-textarea</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/x-textarea" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

``` html
<template>
  <div>
    <group title="textarea">
      <x-textarea
        :max="20"
        placeholder="请填写详细信息"
      />
    </group>
    <group title="和input一起使用">
      <x-input placeholder="标题" />
      <x-textarea
        :max="200"
        name="description"
        placeholder="描述"
      />
    </group>
    <group title="不显示计数器">
      <x-textarea
        :max="200"
        name="detail"
        placeholder="请填写详细信息"
        :show-counter="false"
      />
    </group>
    <group title="set height=200">
      <x-textarea
        :max="200"
        placeholder="请填写详细信息"
        :show-counter="false"
        :height="200"
        :rows="8"
        :cols="30"
      />
    </group>
    <group title="autosize">
      <x-textarea
        ref="autosize"
        placeholder="Type something"
        :show-counter="false"
        :rows="1"
      />
    </group>
  </div>
</template>

<script>
import { XTextarea, Group, XInput } from '../components/_index'
import Autosize from 'autosize'

export default {
  components: {
    XTextarea,
    Group,
    XInput
  },
  mounted () {
    Autosize(this.$refs.autosize.$refs.textarea)
  },
  beforeDestroy () {
    Autosize.destroy(this.$refs.autosize.$refs.textarea)
  }
}
</script>

```

#### Github Issue