Movk Nuxt

Boolean

View source

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

基础用法

使用 afz.boolean() 创建布尔值字段：

`Checkbox`

Checkbox 组件文档

默认的复选框控件，适合单个选项的勾选：

<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({
  agree: afz.boolean({
    controlProps: {
      label: '我已阅读并同意服务条款'
    }
  })
    .refine(val => val === true, '必须同意条款才能继续')
    .meta({
      label: '复选框'
    })
})

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>

`Switch`

Switch 组件文档

开关控件，设置 type: 'switch'，适合功能的启用/禁用：

<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({
  enabled: afz.boolean({
    type: 'switch'
  })
    .default(true)
    .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>

`SlideVerify`

SlideVerify 组件文档

滑动验证控件，设置 type: 'slideVerify'，适合防机器人验证：

<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({
  slideVerify: afz.boolean({
    type: 'slideVerify',
    controlProps: { height: 36, sliderWidth: 40 }
  })
    .meta({ 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>

Number

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

Date

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