更新记录

1.0.6（2023-05-31） 下载此版本

更新图片上传数量问题

1.0.5（2023-04-25） 下载此版本

优化显示问题

1.0.4（2023-03-08） 下载此版本

新增多图片上传

平台兼容性

uni-app

lonjin-form动态表单

lonjin-form：基于uni-app原生组件，无任何第三方依赖；配置简单、无任何第三方依赖，支持输入框、多行文本、单选、多选、图片/视频上传、多图片上传；支持表单验证、默认数据等。

使用方法

demo

<template>
    <view class="content">
        <view class="title">基础表单</view>
        <lonjin-form @submit="submit" @uploadMedia="uploadMedia" :formData="formData" @updateValue="updateValue" :config="config">
        </lonjin-form>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                formData: {},
                config: [
                    {label: '输入框',placeholder: '请输入', key: 'temperature', type: 'input',unit: '℃', inputType: 'text'},
                    {label: '单选', placeholder: '请选择', key: 'age', type: 'picker',options: [{label: '1岁',value: '1'},{label: '2岁',value: '2'}],},
                    {label: '多选', key: 'bloodPressure', options: [{label: '看电影', value: '1'},{label: '下棋',value: '2'}],type: 'multipleChoice'},
                    {label: '文本框', placeholder: '请输入', key: 'remark',type: 'textarea'},
                    {label: '图片/视频', placeholder: '请上传图片', key: 'images',type: 'uploadMedia'},
                    {label: '日期', placeholder: '请选择日期', key: 'date',type: 'date'},
                    {label: '时间',placeholder: '请选择时间', key: 'time',type: 'time'},
                    {label: '多图上传', placeholder: '请上传图片', key: 'picture',type: 'pictureGroup', max: 2}
                ]
            }
        },
        methods: {
            // 更新数据
            updateValue(val) {
                this.formData = val
            },

            // 提交数据
            submit(val) {
                console.log(val)
                console.log(this.formData)
            },

            // 图片/视频上传
            uploadMedia(e) {
                // 如果 在formData中没有定义该字段，则需要进行深拷贝
                const data = JSON.parse(JSON.stringify(this.formData))
                data[e.key] = e.tempFiles
                this.formData = JSON.parse(JSON.stringify(data))

                /* 如果定义了formData: {images: ''}，则不需要进行深拷贝 
                this.formData[e.key] = e.tempFiles
                */
            },

            // 多图上传
            uploadPicture(e) {
                // 如果 在formData中没有定义该字段，则需要进行深拷贝
                const data = JSON.parse(JSON.stringify(this.formData))
                if(data[e.key] && data[e.key].length){
                    data[e.key] = [...data[e.key], e.tempFiles[0].tempFilePath]
                }else{
                    data[e.key] = [e.tempFiles[0].tempFilePath]
                }
                this.formData = JSON.parse(JSON.stringify(data))
                /* 如果定义了formData: {images: ''}，则不需要进行深拷贝 
                this.formData[e.key] = [...this.formData[e.key], ...e.tempFiles[0].tempFilePath]
                */
            },
        }
    }
</script>

配置说明

config 配置说明

rules 配置说明

目前rules支持验证是否为必填、是否符合输入长度、以及正则验证，如验证失败，则通过uni提供的uni.showToast方法弹出message；具体如下：

demo:

<template>
    <view class="content">
        <view class="title">表单验证</view>
        <lonjin-form :rules="rules" @submit="submit" :formData="formData" @updateValue="updateValue" :config="config">
        </lonjin-form>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                formData: {},
                rules: {
                    temperature: [
                        {
                            required: true,
                            message: '请输入邮箱'
                        },
                        {
                            min: 3,
                            max: 11,
                            message: '长度在 3 到 5 个字符'
                        },
                        {
                            regular: '/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/',
                            message: '不符合规则'
                        }
                    ],
                },
                config: [
                    {
                        label: '输入框',
                        placeholder: '请输入',
                        key: 'temperature',
                        type: 'input',
                        unit: '℃',
                        inputType: 'digit',
                        verify: true
                    },
                ]
            }
        },
        methods: {
            updateValue(val) {
                this.formData = val
            },

            // 提交数据
            submit(val) {
                console.log(val)
                console.log(this.formData)
            },
        }
    }
</script>

配置说明:

反馈&&交流

如有问题，可以评论区反馈，或者直接联系作者