Textarea 文本域

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <div class="p-4 w-full">
    <SkTextarea v-model="value" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('Hello World')
</script>

<template>
  <div class="flex flex-col p-4 gap-3 w-full">
    <SkTextarea v-model="value" placeholder="请输入内容" />
    <div class="text-sm text-secondary">
      当前值: {{ value }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <div class="p-4 w-full">
    <SkTextarea v-model="value" placeholder="请输入您的意见和建议..." />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const smallValue = ref('')
const mediumValue = ref('')
const largeValue = ref('')
</script>

<template>
  <div class="flex flex-col p-4 gap-3 w-full">
    <SkTextarea v-model="smallValue" size="small" placeholder="小尺寸文本域" />
    <SkTextarea v-model="mediumValue" size="medium" placeholder="中尺寸文本域" />
    <SkTextarea v-model="largeValue" size="large" placeholder="大尺寸文本域" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('这是一些示例文本')
</script>

<template>
  <div class="flex flex-col p-4 gap-3 w-full">
    <SkTextarea v-model="value1" :show-count="false" placeholder="不显示字数统计" />
    <SkTextarea v-model="value2" :show-count="true" :max-length="100" placeholder="显示字数统计" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <div class="flex flex-col p-4 gap-3 w-full">
    <SkTextarea v-model="value" :maxlength="50" show-count placeholder="最大长度 50 字符" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const normalValue = ref('')
const disabledValue = ref('这是禁用状态的文本域')
</script>

<template>
  <div class="flex flex-col p-4 gap-3 w-full">
    <SkTextarea v-model="normalValue" placeholder="正常状态" />
    <SkTextarea v-model="disabledValue" disabled placeholder="禁用状态" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('这是只读内容，无法编辑')
</script>

<template>
  <div class="flex flex-col p-4 gap-3 w-full">
    <SkTextarea placeholder="普通文本域" />
    <SkTextarea v-model="value" placeholder="只读文本域" readonly />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('这是一些示例文本')
</script>

<template>
  <div class="flex p-4 w-full">
    <SkTextarea v-model="value" clearable placeholder="可清空的文本域" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('这是一个自动高度的文本域示例。\n当您输入更多内容时，\n文本域会自动调整高度。\n继续输入更多文本来查看效果。')
</script>

<template>
  <div class="flex flex-col p-4 gap-3 w-full">
    <SkTextarea v-model="value" :auto-height="true" placeholder="自动高度文本域" />
  </div>
</template>