<template>
  <div class="demo-textarea-size">
    <div class="demo-box">
      <div class="explain">
        resize
      </div>
      <ui-textarea
        v-model="value"
        :autosize="{
          minRows: 2
        }"
        resize></ui-textarea>
      <div class="console">
        {{ value2 }}
      </div>
    </div>
    <div class="demo-box">
      <div class="explain">
        autosize
      </div>
      <ui-textarea
        v-model="value1"
        autosize></ui-textarea>
      <div class="console">
        {{ value2 }}
      </div>
    </div>
    <div class="demo-box">
      <div class="explain">
        autosize minRows maxRows
      </div>
      <ui-textarea
        v-model="value2"
        :autosize="{
          minRows: 2,
          maxRows: 5
        }"></ui-textarea>
    </div>
  </div>
</template>
<script>
import { Textarea } from "amumu-ui"
export default {
  components: {
    "ui-textarea": Textarea,
  },
  data() {
    return {
      value: "",
      value1: "",
      value2: "",
    }
  },
}
</script>
<style lang="scss">
.demo-textarea-size {
  .demo-box {
    margin-bottom: 12px;
  }
}
</style>
