Vue3封装动态Form表单

在使用Vue3的时候,有的时候,经常需要写很多的表单,使用UI组件库的时候,经常需要一大堆的Form和Form-Item;写的多,拷贝的也多,看到网上大佬的优雅代码,醍醐灌顶,改造了如下代码

UI库: @arco-design/web-vue ^2.56.3

vue: ^3.5.12,

1. 父组件

<template>
    <div class="container">
        <!-- 第一种用法,单文件.vue的用法,所有的属性通过props传递过去 -->
        <!-- <FormBuilder ref="formRef" v-model="formData" :fields="fields" :label-col-props="{ span: 2 }"
            :wrapper-col-props="{ span: 20 }" :rules="rules">
        </FormBuilder> -->
        
        <!-- 第二种用法,hooks的方式,通过渲染函数进行渲染,h -->
        <FormBuilder2></FormBuilder2>
        <a-button @click="handleSubmit">提交</a-button>
    </div>
</template>

<script setup lang="ts">
import FormBuilder from '@/components/FormBuilder.vue';
import { Message } from '@arco-design/web-vue';
import useFormBuilder from '@/hooks/useFormBuilder';

const formRef = useTemplateRef<InstanceType<typeof FormBuilder>>('formRef')

const formData = reactive({
    name: '张',
    age: 18,
    gender: '1',
})

const fields = computed(() => ([
    {
        componentType: 'input',
        formItemProps: {
            label: '姓名',
            field: 'name',
            required: true,
        },
        componentProps: {
            placeholder: '请输入姓名',
        }
    },
    {
        componentType: 'number',
        isHidden: formData.name === "张三", // ",
        formItemProps: {
            label: '年龄',
            field: 'age',
        },
        componentProps: {
            placeholder: '请输入年龄',
        }
    },
    {
        componentType: 'select',
        formItemProps: {
            label: '性别',
            field: 'gender',
        },
        componentProps: {
            placeholder: '请选择性别',
            options: [
                { label: '男', value: '1' },
                { label: '女', value: '2' }
            ]
        }
    }
]))

const rules = {
    name: [{ required: true, message: '请输入姓名' }],
    age: [{ required: true, message: '请输入年龄' }],
    gender: [{ required: true, message: '请选择性别' }],
}

const handleSubmit = async () => {
    // const valid = await formRef.value?.validate()
    const valid = await getFormBuilderRef().value?.validate()
    if (valid) return Message.error('提交失败')
    console.log(formData);
    Message.success('提交成功')
}
const { FormBuilder: FormBuilder2, getRef: getFormBuilderRef } = useFormBuilder({
    modelValue: formData,
    fields: fields.value,
    rules,
    wrapperColProps: {
        span: 20
    },
    labelColProps: {
        span: 2
    }
})
</script>

<style lang="scss" scoped></style>

2. FormBuilder.vue 子组件

<template>
    <a-form ref="formRef" :model="formData" v-bind="$attrs">
        <a-row>
            <a-col :span="getSpan(item)" v-for="item in filterFields" :key="item.formItemProps.field">
                <a-form-item v-bind="item.formItemProps">
                    <slot :name="item.formItemProps.field">
                        <component v-model="formData[item.formItemProps.field]" :is="getComponent(item)"
                            v-bind="item.componentProps">
                        </component>
                    </slot>
                </a-form-item>
            </a-col>
        </a-row>
    </a-form>
</template>

<script setup lang="ts" name="FormBuilder">
import { Input, InputNumber, Select } from '@arco-design/web-vue'
import type { ValidatedError } from '@arco-design/web-vue/es/form/interface'
const props = defineProps({
    fields: {
        type: Array as PropType<Record<string, any>[]>,
        default: () => []
    }
})

const formRef = useTemplateRef('formRef')
const formData = defineModel<Record<string, any>>({ required: true })

const componentMap = {
    input: Input,
    number: InputNumber,
    select: Select,
}

const getComponent = (item: Record<string, any>) => {
    return componentMap[item.componentType as keyof typeof componentMap]
}

// 1. isHidden 为函数每次更新表单时都会执行
// 2. 对fields使用 computed 缓存
// const filterFields = computed(() => {
//     return props.fields.filter((item) => {
//         return !(typeof item.isHidden === 'function' ? item.isHidden() : item.isHidden)
//     })
// })

const filterFields = computed(() => {
    return props.fields.filter((item) => !item.isHidden)
})

const getSpan = (item: Record<string, any>) => {
    return item.span || 12
}

type ValidateFieldFnReturn = Promise<undefined | Record<string, ValidatedError>>
defineExpose({
    validate: () => formRef.value?.validate() as ValidateFieldFnReturn,
    validateField: ((field: string | string[]) => formRef.value?.validateField(field) as ValidateFieldFnReturn)
})
</script>

<style lang="scss" scoped></style>

3. useFormBuilder.ts hooks文件

import FormBuilder from "@/components/FormBuilder.vue";
import type { SetupContext } from "vue";
type FormBuilderProps = InstanceType<typeof FormBuilder>["$props"];

export default function useFormBuilder(props: Record<string, any>) {
    const formRef = ref<InstanceType<typeof FormBuilder>>();
    const Component = (_: Record<string, any>, { slots }: SetupContext) => {
        return h(FormBuilder, { ...(props as FormBuilderProps), ref: formRef }, slots);
    };
    return {
        FormBuilder: Component,
        getRef: () => formRef,
    };
}

4. 最终的演示效果