perf: expose the formApi for a login form (#4806)

This commit is contained in:
Vben
2024-11-04 22:46:16 +08:00
committed by GitHub
parent d31535cd98
commit 5999a862b6
8 changed files with 589 additions and 321 deletions

View File

@@ -53,7 +53,7 @@ const emit = defineEmits<{
const router = useRouter();
const [Form, { validate, getValues }] = useVbenForm(
const [Form, formApi] = useVbenForm(
reactive({
commonConfig: {
hideLabel: true,
@@ -65,8 +65,8 @@ const [Form, { validate, getValues }] = useVbenForm(
);
async function handleSubmit() {
const { valid } = await validate();
const values = await getValues();
const { valid } = await formApi.validate();
const values = await formApi.getValues();
if (valid) {
emit('submit', {
code: values?.code,
@@ -78,6 +78,10 @@ async function handleSubmit() {
function goToLogin() {
router.push(props.loginPath);
}
defineExpose({
getFormApi: () => formApi,
});
</script>
<template>

View File

@@ -50,7 +50,7 @@ const emit = defineEmits<{
submit: [Record<string, any>];
}>();
const [Form, { validate, getValues }] = useVbenForm(
const [Form, formApi] = useVbenForm(
reactive({
commonConfig: {
hideLabel: true,
@@ -64,8 +64,8 @@ const [Form, { validate, getValues }] = useVbenForm(
const router = useRouter();
async function handleSubmit() {
const { valid } = await validate();
const values = await getValues();
const { valid } = await formApi.validate();
const values = await formApi.getValues();
if (valid) {
emit('submit', values);
}
@@ -74,6 +74,10 @@ async function handleSubmit() {
function goToLogin() {
router.push(props.loginPath);
}
defineExpose({
getFormApi: () => formApi,
});
</script>
<template>

View File

@@ -44,7 +44,7 @@ const emit = defineEmits<{
submit: [Recordable<any>];
}>();
const [Form, { setFieldValue, validate, getValues }] = useVbenForm(
const [Form, formApi] = useVbenForm(
reactive({
commonConfig: {
hideLabel: true,
@@ -63,8 +63,8 @@ const localUsername = localStorage.getItem(REMEMBER_ME_KEY) || '';
const rememberMe = ref(!!localUsername);
async function handleSubmit() {
const { valid } = await validate();
const values = await getValues();
const { valid } = await formApi.validate();
const values = await formApi.getValues();
if (valid) {
localStorage.setItem(
REMEMBER_ME_KEY,
@@ -80,9 +80,13 @@ function handleGo(path: string) {
onMounted(() => {
if (localUsername) {
setFieldValue('username', localUsername);
formApi.setFieldValue('username', localUsername);
}
});
defineExpose({
getFormApi: () => formApi,
});
</script>
<template>

View File

@@ -52,7 +52,7 @@ const emit = defineEmits<{
submit: [Recordable<any>];
}>();
const [Form, { validate, getValues }] = useVbenForm(
const [Form, formApi] = useVbenForm(
reactive({
commonConfig: {
hideLabel: true,
@@ -66,8 +66,8 @@ const [Form, { validate, getValues }] = useVbenForm(
const router = useRouter();
async function handleSubmit() {
const { valid } = await validate();
const values = await getValues();
const { valid } = await formApi.validate();
const values = await formApi.getValues();
if (valid) {
emit('submit', values as { password: string; username: string });
}
@@ -76,6 +76,10 @@ async function handleSubmit() {
function goToLogin() {
router.push(props.loginPath);
}
defineExpose({
getFormApi: () => formApi,
});
</script>
<template>