Movk Nuxt

Number

View source

Number 字段类型的使用方法和配置选项

基础用法

使用 afz.number() 创建数字字段：

InputNumber

InputNumber 组件文档

基础数字输入框，支持整数、小数、范围限制等配置：

<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod/v4'

const { afz } = useAutoForm()
const toast = useToast()

const schema = afz.object({
  count: afz.number()
    .int('必须是整数')
    .min(0, '不能小于 0')
    .max(100, '不能大于 100')
    .meta({
      label: '数字输入',
      placeholder: '请输入 0-100 的整数',
      hint: '支持步长、范围限制等配置'
    })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: JSON.stringify(event.data, null, 2)
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>

Slider

Slider 组件文档

数值滑块，设置 type: 'slider'，适合有明确范围的数值选择：

<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod/v4'

const { afz } = useAutoForm()
const toast = useToast()

const schema = afz.object({
  volume: afz.number({
    type: 'slider',
    controlProps: {
      min: 0,
      max: 100,
      step: 5
    }
  })
    .default(50)
    .meta({
      label: '音量滑块',
      hint: '拖动滑块调整数值，步长为 5'
    })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: JSON.stringify(event.data, null, 2)
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>

StarRating

星级评分组件，设置 type: 'starRating'，支持半星评分和自定义最大星数：

<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod/v4'

const { afz } = useAutoForm()
const toast = useToast()

const schema = afz.object({
  rating: afz.number({
    type: 'starRating',
    controlProps: {
      allowHalf: true,
      max: 10
    }
  })
    .min(0, '评分不能小于 0')
    .max(10, '评分不能大于 10')
    .meta({
      label: '星级评分',
      hint: '支持半星评分'
    })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: JSON.stringify(event.data, null, 2)
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>

String

String 字段类型的使用方法和配置选项

Boolean

Boolean 字段类型的使用方法和配置选项