Li-Daisy

Appearance

Textarea多行文本输入框 ​

用于输入较长文本数据

尺寸 ​

通过 size 来设置尺寸大小 可选值有 xs sm md lg xl，默认值是 md

与 daisyUI 不同的是此处尺寸不会影响 textarea 这一元素的高度,影响的是 textarea 内字体大小属性

vue
<template>
  <div class="flex flex-col gap-y-4">
    <Textarea
      v-for="size in sizes"
      :key="size"
      v-model="text"
      :size="size"
      placeholder="请输入文本"
    />
  </div>
</template>

<script setup lang="ts">
import { Textarea, type TextareaSize } from 'li-daisy'
import { ref } from 'vue'

const sizes = ref<TextareaSize[]>(['xs', 'sm', 'md', 'lg', 'xl'])

const text = ref<string>('')
</script>

color颜色 ​

通过 color 来设置颜色

可选值 [base,neutral,primary,secondary,accent,info,success,warning,error]

vue
<template>
  <div class="flex flex-col gap-4">
    <Textarea
      v-for="color in colors"
      :key="color"
      v-model="text"
      :color="color"
      placeholder="请输入文本"
    />
  </div>
</template>

<script setup lang="ts">
import { Textarea, type TextareaColor } from 'li-daisy'
import { ref } from 'vue'

const colors = ref<TextareaColor[]>([
  'base',
  'neutral',
  'primary',
  'secondary',
  'accent',
  'info',
  'success',
  'warning',
  'error',
])

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

最大长度 ​

通过 maxlength 来设置最大文本长度

0/20
0/20
0/20
0/20
0/20
0/20
0/20
0/20
0/20
vue
<template>
  <div class="flex flex-col gap-4">
    <Textarea
      v-for="color in colors"
      :key="color"
      v-model="text"
      :color="color"
      placeholder="请输入文本"
      :maxlength="20"
    />
  </div>
</template>

<script setup lang="ts">
import { Textarea, type TextareaColor } from 'li-daisy'
import { ref } from 'vue'

const colors = ref<TextareaColor[]>([
  'base',
  'neutral',
  'primary',
  'secondary',
  'accent',
  'info',
  'success',
  'warning',
  'error',
])

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

禁用状态 ​

通过 disable 来设置禁用状态

0/20
0/20
0/20
0/20
0/20
0/20
0/20
0/20
0/20
vue
<template>
  <div class="flex flex-col gap-4">
    <Textarea
      v-for="color in colors"
      :key="color"
      v-model="text"
      :color="color"
      placeholder="请输入文本"
      :disabled="true"
      :maxlength="20"
    />
  </div>
</template>

<script setup lang="ts">
import { Textarea, type TextareaColor } from 'li-daisy'
import { ref } from 'vue'

const colors = ref<TextareaColor[]>([
  'base',
  'neutral',
  'primary',
  'secondary',
  'accent',
  'info',
  'success',
  'warning',
  'error',
])

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

设置行数 ​

通过 min-rows max-rows 来分别设置最小和最大行数

行数超出 max-rows 时将显示滚动条 ::demo textarea/rows ::

API ​

Attributes ​

属性值说明类型默认值
size尺寸TextareaSize'md'
placeholder占位符string-
disabled是否禁用booleanfalse
maxlength最大文本长度number-
color颜色TextareaColorbase