Number Input 数字输入框

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

const value = ref(0)
</script>

<template>
  <div class="flex justify-center p-4 w-full">
    <SkNumberInput v-model="value" placeholder="请输入数字" />
  </div>
</template>

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

const value = ref(0)
</script>

<template>
  <div class="flex justify-center p-4 w-full">
    <SkNumberInput v-model="value" placeholder="请输入数字" />
  </div>
</template>

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

const value = ref()
</script>

<template>
  <div class="flex flex-col gap-3 p-4">
    <SkNumberInput v-model="value" placeholder="请输入数字" />
  </div>
</template>

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

const value1 = ref(0)
const value2 = ref(100)
</script>

<template>
  <div class="flex flex-col p-4 gap-3">
    <SkNumberInput v-model="value1" :min="0" :max="10" placeholder="范围 0-10" />
    <SkNumberInput v-model="value2" :min="10" :max="100" placeholder="范围 10-100" />
  </div>
</template>

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

const value1 = ref(0)
const value2 = ref(0)
</script>

<template>
  <div class="flex flex-col p-4 gap-3">
    <SkNumberInput v-model="value1" :step="5" placeholder="步长 5" />
    <SkNumberInput v-model="value2" :step="0.1" placeholder="步长 0.1" />
  </div>
</template>

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

const normalValue = ref(7)
const strictValue = ref(10)
</script>

<template>
  <div class="flex flex-col p-4 gap-3">
    <SkNumberInput v-model="normalValue" :step="5" placeholder="普通步长模式" />
    <SkNumberInput v-model="strictValue" :step="5" step-strictly placeholder="严格步长模式" />
  </div>
</template>

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

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

<template>
  <div class="flex flex-col items-center p-4 gap-3">
    <SkNumberInput v-model="smallValue" size="small" placeholder="小尺寸" />
    <SkNumberInput v-model="mediumValue" size="medium" placeholder="中尺寸" />
    <SkNumberInput v-model="largeValue" size="large" placeholder="大尺寸" />
  </div>
</template>

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

const normalValue = ref(10)
const disabledValue = ref(20)
</script>

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

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

const normalValue = ref(10)
const readonlyValue = ref(20)
</script>

<template>
  <div class="flex flex-col p-4 gap-3 w-full">
    <SkNumberInput v-model="normalValue" placeholder="正常状态" />
    <SkNumberInput v-model="readonlyValue" readonly placeholder="只读状态" />
  </div>
</template>

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

const currencyValue = ref(1000)
</script>

<template>
  <div class="flex flex-col p-4 gap-3 w-full">
    <SkNumberInput
      v-model="currencyValue"
      :format-options="{ style: 'currency', currency: 'CNY' }"
      placeholder="货币格式"
    />
  </div>
</template>