Li-Daisy

Appearance

NumberInput数字输入框 ​

用于输入数字

尺寸 ​

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

vue
<template>
  <div class="flex flex-col gap-y-4">
    <NumberInput
      v-for="size in sizes"
      :key="size"
      v-model="numberValue"
      :size="size"
      :min="0"
      :max="10"
    />
  </div>
</template>

<script setup lang="ts">
import { NumberInput, type NumberInputSize } from 'li-daisy'

import { ref } from 'vue'

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

const numberValue = ref<number>(10)
</script>

禁用状态 ​

vue
<template>
  <div class="flex flex-col gap-4">
    <NumberInput
      v-for="color in colors"
      :key="color"
      v-model="numberValue"
      class="w-64 mx-auto"
      :color="color"
      :disabled="true"
    />
  </div>
</template>

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

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

const numberValue = ref<number>(10)
</script>

最值 ​

通过 min 和 max 来分别设置最小和最大值

color颜色 ​

通过 color 来设置颜色

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

vue
<template>
  <div class="flex flex-col gap-4">
    <NumberInput
      v-for="color in colors"
      :key="color"
      v-model="numberValue"
      class="w-64 mx-auto"
      :color="color"
      :min="0"
      :max="20"
    />
  </div>
</template>

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

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

const numberValue = ref<number>(10)
</script>

API ​

Attributes ​

属性值说明类型默认值
size尺寸NumberInputSize'md'
placeholder占位符string-
disabled是否禁用booleanfalse
min最小值number-
max最大值number-
color颜色NumberInputColorbase