Textarea 文本域

				
<template>
  <zk-theme type="page" :padding="30" showBack navbarTitle="多行本输入框">
    <!-- 基础用法 -->
    <zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
      <zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" />
      <view class="demo-content">
        <zk-textarea
          v-model="value1"
          placeholder="请输入内容"
        />
      </view>
    </zk-theme>

    <!-- 显示字数统计 -->
    <zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
      <zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="显示字数统计" />
      <view class="demo-content">
        <zk-textarea
          v-model="value2"
          placeholder="请输入内容"
          :maxlength="100"
          show-word-limit
        />
      </view>
    </zk-theme>

    <!-- 自动增高 -->
    <zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
      <zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自动增高" />
      <view class="demo-content">
        <zk-textarea
          v-model="value3"
          placeholder="请输入内容"
          :auto-height="true"
        />
      </view>
    </zk-theme>

    <!-- 禁用状态 -->
    <zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
      <zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="禁用状态" />
      <view class="demo-content">
        <zk-textarea
          v-model="value4"
          placeholder="请输入内容"
          disabled
        />
      </view>
    </zk-theme>

    <!-- 不同边框样式 -->
    <zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
      <zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="边框样式" />
      <view class="demo-content">
        <zk-textarea
          v-model="value5"
          placeholder="四周边框"
          border="surround"
        />
        <view style="height: 20rpx;" />
        <zk-textarea
          v-model="value6"
          placeholder="底部边框"
          border="bottom"
        />
        <view style="height: 20rpx;" />
        <zk-textarea
          v-model="value7"
          placeholder="无边框"
          border="none"
        />
      </view>
    </zk-theme>
  </zk-theme>
</template>

<script>
export default {
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      value4: '这是禁用状态的文本域',
      value5: '',
      value6: '',
      value7: ''
    }
  }
}
</script>

<style lang="scss">
.demo-content {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
}
</style>