更新记录

1.0.0（2022-02-09） 下载此版本

1.0.0 1.表单校验 2.表单生成 3.日期选择 4.图片选择 5.多文本输入

平台兼容性

json配置说明

{
        'title': '姓名：', //标题
        'type': 1, //类型 (1 文本 2 输入框 3 多项选择器 4 普通选择器)
        'inputType': 'number', //(text文本输入键盘 number数字输入键盘 idcard身份证输入键盘 digit带小数点的数字键盘 tel电话输入键盘)
        'value': 'name', //字段
        'vertical': 1, //方向(默认为 1[横向] 2[纵向])
        'maxlength': '', //文本长度 (int 类型)
        'hint': '请输入姓名', //提示语句 
        'required': true, //是否必填(默认不必填)
        'show': '', //是否显示
        'typeData': [], //选择器数据
        'style': 'color: #FC011A', //自定义数据样式
        'multiple': true, //是否多选(适用于选择器)
        'disabled': false, //是否禁用
        'underline': false, //是否不显示下划线
        'name': '测试字段数据', //选择器数据
    }

测试数据

const from1 = [{
    'title': '姓名：', //标题
    'type': 1, //类型 (1 文本 2 输入框 3 多项选择器 4 普通选择器)
    'inputType': 'number', //(text文本输入键盘 number数字输入键盘 idcard身份证输入键盘 digit带小数点的数字键盘 tel电话输入键盘)
    'value': 'name', //字段
    'vertical': 1, //方向(默认为 1[横向] 2[纵向])
    'maxlength': '', //文本长度 (int 类型)
    'hint': '请输入姓名', //提示语句 
    'required': true, //是否必填(默认不必填)
    'show': '', //是否显示
    'typeData': [], //选择器数据
    'style': 'color: #FC011A', //自定义数据样式
    'multiple': true, //是否多选(适用于选择器)
    'disabled': false, //是否禁用
    'underline': false, //是否不显示下划线
    'name': '测试字段数据', //选择器数据
}, {
    'title': '年龄：',
    'required': true,
    'inputType': 'number',
    'type': 2,
    'value': 'age',
    'hint': '请输入年龄',
    'maxlength': 3
}, {
    'title': '性别：',
    'type': 3,
    'value': 'sex',
    'multiple': false,
    'typeData': [{
        'checked': false, //默认选中
        'value': '1',
        'name': '男'
    }, {
        'checked': false,
        'value': '2',
        'name': '女'
    }],
}, {
    'title': '人员类型：',
    'type': 4,
    'value': 'native',
    'hint': '请选择人员类型',
    'typeData': ['类型一', '类型二', '类型三', '类型四']
}, {
    'title': '出生日期：',
    'type': 4,
    'mode': 'date',
    'value': 'date',
    'hint': '请选择出生日期'
}, {
    'title': '添加时间：',
    'type': 4,
    'mode': 'time',
    'value': 'native',
    'hint': '请选择添加时间'
}, {
    'title': '备注',
    'type': 5,
    'vertical': 2,
    'value': 'remark',
    'hint': '请输入备注信息',
    'maxlength': 200,
    'style': '',
    'underline': true,
}, {
    'title': '附件',
    'type': 6,
    'vertical': 2,
    'value': 'image'
}]

完整代码

<template>
    <view class="content">
        <view style="width: 100%;">
            <form-builder :sourceData="formData" :imgWidth="imgWidth" @submit="submit"></form-builder>
        </view>
    </view>
</template>

<script>
    import testData from '../../data/test-data.js'

    export default {
        data() {
            return {
                title: 'Hello',
                imgWidth: 0,
                formData: []
            }
        },
        onLoad() {
            uni.getSystemInfo({
                success: function(res) {
                    this.imgWidth = res.windowWidth / 4
                }
            })
            // console.log('屏幕宽度', this.$parent,this.$children);
            // this.imgWidth = this.windowWidth / 4
            this.formData = testData.from1
        },
        methods: {
            submit(e, form) {
                console.log('输出内容', e);
                uni.showToast({
                    icon: 'none',
                    title: JSON.stringify(e)
                })
            }
        }
    }
</script>

<style>

</style>