用法
构建在 表单 组件之上，AuthForm 组件可以在您的页面中使用，或者包裹在 卡片 中。
该表单将根据 fields 属性构建自身，状态将在内部处理。您可以将传递给 FormGroup 或 Input 的所有属性传递给每个字段。
使用 providers 属性在表单上方或下方（取决于 align 属性）添加一些 按钮，并使用 title、description、icon 属性自定义表单（可以使用插槽覆盖）。
登录
输入您的凭据以访问您的帐户。
或
<template>
<UAuthForm
title="Login"
description="Enter your credentials to access your account."
align="bottom"
icon="i-heroicons-user-circle"
:fields="[{ type: 'email', label: 'Email', name: 'email', placeholder: 'Enter your email', color: 'gray' }, { type: 'password', label: 'Password', name: 'password', placeholder: 'Enter your password', color: 'gray' }]"
:providers="[{ label: 'GitHub', icon: 'i-simple-icons-github', color: 'gray' }]"
:loading="false"
/>
</template>
因为它是一个 表单，您可以通过 schema 或 validate 属性处理验证逻辑。
<script setup lang="ts">
import type { FormError } from '#ui/types'
const fields = [{
name: 'email',
type: 'text',
label: 'Email',
placeholder: 'Enter your email'
}, {
name: 'password',
label: 'Password',
type: 'password',
placeholder: 'Enter your password'
}, {
name: 'remember',
label: 'Remember me',
type: 'checkbox'
}]
const validate = (state: any) => {
const errors: FormError[] = []
if (!state.email) errors.push({ path: 'email', message: 'Email is required' })
if (!state.password) errors.push({ path: 'password', message: 'Password is required' })
return errors
}
const providers = [{
label: 'Continue with GitHub',
icon: 'i-simple-icons-github',
color: 'white' as const,
click: () => {
console.log('Redirect to GitHub')
}
}]
function onSubmit(data: any) {
console.log('Submitted', data)
}
</script>
<!-- eslint-disable vue/multiline-html-element-content-newline -->
<!-- eslint-disable vue/singleline-html-element-content-newline -->
<template>
<UCard class="max-w-sm w-full">
<UAuthForm
:fields="fields"
:validate="validate"
:providers="providers"
title="Welcome back!"
align="top"
icon="i-heroicons-lock-closed"
:ui="{ base: 'text-center', footer: 'text-center' }"
@submit="onSubmit"
>
<template #description>
Don't have an account? <NuxtLink to="/" class="text-primary font-medium">Sign up</NuxtLink>.
</template>
<template #password-hint>
<NuxtLink to="/" class="text-primary font-medium">Forgot password?</NuxtLink>
</template>
<template #validation>
<UAlert color="red" icon="i-heroicons-information-circle-20-solid" title="Error signing in" />
</template>
<template #footer>
By signing in, you agree to our <NuxtLink to="/" class="text-primary font-medium">Terms of Service</NuxtLink>.
</template>
</UAuthForm>
</UCard>
</template>
您可以通过添加字段名称前缀来覆盖每个 FormGroup 的插槽：
#password-hint。插槽
图标
{}
标题
{}
描述
{}
验证
{}
页脚
{}
属性
图标
字符串
未定义ui
DeepPartial<{ wrapper: string; base: string; container: string; title: string; description: string; icon: { wrapper: string; base: string; }; providers: string; form: string; footer: string; passwordToggle: { showIcon: string; hideIcon: string; }; default: { ...; }; }>
{}标题
字符串
未定义对齐
"top" | "bottom"
"bottom"schema
任何
未定义validate
((state: any) => Promise<FormError<string>[]>) | ((state: any) => FormError<string>[])
未定义validateOn
FormEventType[]
["submit"]描述
字符串
未定义fields
{ name: string; type: string; label: string; description?: string; help?: string; hint?: string; size?: FormGroupSize; placeholder?: string; required?: boolean; value?: string | number; readonly?: boolean; }[]
[]分隔线
字符串
"or"providers
(Button & { click?: (...args: any[]) => void; })[]
[]passwordToggle
按钮
{}submitButton
按钮
{}加载
布尔值
false配置
{
wrapper: 'w-full max-w-sm space-y-6',
base: '',
container: 'gap-y-6 flex flex-col',
title: 'text-2xl text-gray-900 dark:text-white font-bold',
description: 'text-gray-500 dark:text-gray-400 mt-1',
icon: {
wrapper: 'mb-2 pointer-events-none',
base: 'w-8 h-8 flex-shrink-0 text-gray-900 dark:text-white'
},
providers: 'space-y-3',
form: 'space-y-6',
footer: 'text-sm text-gray-500 dark:text-gray-400 mt-2',
default: {
submitButton: {
label: 'Continue'
}
}
}