更新记录

1.0.0（2025-10-16） 下载此版本

1.0.0 初版

平台兼容性

uni-app

ggb-form

vue3动态表单，ggb-form（自用）

<template>
    <view class="container">
        <view class="gform">
            <ggb-form ref="GformRef" v-model="formData" :config="{ ...basicConfig, rules, schemas }"
                @submit="handleConfirm" @cancel="handleClose" @formClick="formClick" @formChange="formChange">
                <template #main>
                    <up-switch v-model="formData['main']" size="18"></up-switch>
                </template>
            </ggb-form>
        </view>
    </view>
</template>

<script setup>
    import {
        onMounted,
        reactive,
        ref
    } from 'vue';

    const formData = reactive({
        name: '',
        phone: '',
        like: '',
        main: false,
        createTime: '',
        calendars: [],
        sex: null,
        remark: ""
    })
    const GformRef = ref()

    const basicConfig = {
        labelWidth: '100',
    }

    // 默认表单配置项 -- 尽量放置静态配置，动态数据配置使用setProps
    const schemas = [{
            field: 'name',
            label: '姓名',
            component: 'Input',
            borderBottom: true,
            required: true,
            componentProps: {
                placeholder: '请输入姓名',
                border: 'none',
                maxlength: 20
            }
        },
        {
            field: 'phone',
            label: '手机号',
            component: 'Input',
            borderBottom: true,
            required: true,
            componentProps: {
                placeholder: '请输入手机号',
                border: 'none',
                type: 'number',
                maxlength: 11
            }
        },
        {
            field: 'like',
            label: '喜好',
            component: 'Radio',
            borderBottom: true,
            componentProps: {
                placement: 'row',
                columns: [{
                    name: '足球'
                }, {
                    name: '篮球'
                }, {
                    name: '游泳'
                }],
                onChange: (payload) => {
                    console.log('监听了change，也可以使用formChange监听');

                    const {
                        event,
                        model,
                        setProps
                    } = payload

                    if (event) {
                        if (event == '足球') {
                            model['sex'] = 1
                        } else {
                            model['sex'] = 0
                        }

                        setProps([{
                            field: 'love',
                            ifHide: event == '游泳' ? true : false,
                            componentProps: {
                                disabled: event == '篮球' ? true : false
                            }
                        }])
                    }
                }
            }
        },
        {
            field: 'love',
            label: '专业',
            component: 'Checkbox',
            borderBottom: true,
            ifHide: false,
            componentProps: {
                disabled: false,
                option: [{
                    name: 'LOL'
                }, {
                    name: 'CF'
                }, {
                    name: 'SPEED'
                }],
                onChange: (payload) => {
                    console.log(payload);
                }
            }
        },
        {
            field: 'main',
            label: '插槽switch',
            component: 'CusSlot',
            borderBottom: true
        },
        {
            field: 'createTime',
            label: '日期',
            component: 'DatetimePicker',
            borderBottom: true,
            componentProps: {
                mode: 'date',
                choiceStyle: {
                    color: '#303133',
                    fontSize: '28rpx'
                },
                placeholderStyle: {
                    color: '#c0c4cc',
                    fontSize: '28rpx'
                }
            }
        },
        {
            field: 'calendars',
            label: '日历',
            component: 'Calendar',
            borderBottom: true,
            componentProps: {
                placeholder: '请输入日历',
                mode: 'multiple',
                formatter: (day) => {
                    day.bottomInfo = '签到';
                    return day;
                },
                choiceStyle: {
                    color: '#303133',
                    fontSize: '28rpx'
                },
                placeholderStyle: {
                    color: '#c0c4cc',
                    fontSize: '28rpx',
                }
            }
        },
        {
            field: 'sex',
            label: '性别',
            component: 'Picker',
            borderBottom: true,
            componentProps: {
                placeholder: '请输入性别',
                option: [{
                        label: '男',
                        id: '1'
                    },
                    {
                        label: '女',
                        id: '0'
                    }
                ],
            }
        },
        {
            field: 'remark',
            label: '备注',
            component: 'Textarea',
            borderBottom: true,
            labelPosition: 'top',
            componentProps: {
                placeholder: '请输入备注',
                border: 'none',
            }
        },
    ];

    const rules = {
        name: [{
            required: true,
            message: '请输入姓名',
            trigger: ['blur', 'change']
        }],
        phone: [{
                type: 'number',
                required: true,
                message: '请输入业主手机号',
                trigger: ['blur', 'change']
            },
            {
                type: 'number',
                validator: (rule, value, callback) => /^1[3-9]\d{9}$/.test(value),
                required: true,
                message: '格式错误，请修改！',
                trigger: ['blur']
            }
        ],
    };

    const handleConfirm = async () => {
        try {
            await GformRef.value.validate();
            console.log('提交了', formData);
        } catch (error) {
            console.error(error);
        }
    }

    const handleClose = () => {
        console.log('取消了');
    }

    const formClick = (event) => {
        console.log(event, '点击这个表单项');
    }

    const formChange = (event) => {
        console.log(event, '触发了change事件');
    }
</script>

<style lang="scss">
    page {
        background: #f5f6fa;
    }

    .bubbling {
        padding-top: 300px;
    }

    .container {
        padding: 20rpx 30rpx;
        background: #fff;
    }
</style>