更新记录

1.0.2（2024-09-17） 下载此版本

增加了图片上传

1.0.1（2024-09-17） 下载此版本

修正部分bug

1.0.0（2024-09-17） 下载此版本

第一次提交

平台兼容性

uni-app

uni-app x

piao-form

完整示例

<template>
    <view>
        <piao-form :formData="formData" @submit="sub"></piao-form>
    </view>
</template>

<script>
export default {
    data() {
        return {
            images: [],
            formData: {
                title: {
                    type: 'textarea', //必填
                    rules: [
                        //非必填
                        {
                            required: true,
                            errorMessage: '请填写姓名'
                        },
                        {
                            minLength: 3,
                            maxLength: 10,
                            errorMessage: '长度在3到5个字符'
                        }
                    ],
                    placeholder: '请输入姓名', //非必填
                    label: '这是标题', //非必填
                    value: 'sadfs' //必填
                },
                age: {
                    type: 'number',
                    rules: [
                        {
                            minLength: 3,
                            maxLength: 10,
                            errorMessage: '长度在3到5个字符'
                        }
                    ],
                    placeholder: '请输入姓名',
                    label: '年龄',
                    value: '232'
                },
                name: {
                    type: 'text',
                    rules: [
                        {
                            required: false,
                            errorMessage: '请填写年龄'
                        }
                    ],
                    placeholder: '请输入姓名',
                    label: '年龄',
                    value: '121'
                },
                alert: {
                    type: 'datetime',
                    label: '提醒日期',
                    value: null,
                    rules: [
                        {
                            required: true,
                            errorMessage: '请选择提醒日期'
                        }
                    ]
                },
                status: {
                    type: 'select',
                    rules: [], //提供空的数据
                    placeholder: '请选择状态',
                    label: '选择状态',
                    value: '',
                    range: [
                        { value: 0, text: '篮球' },
                        { value: 1, text: '足球' },
                        { value: 2, text: '游泳' }
                    ]
                },
                sex: {
                    type: 'checkbox',
                    label: '选择状态',
                    value: 0, //当multiple为true时，value的值为数组类型
                    range: [
                        { value: 0, text: '男' },
                        { value: 1, text: '女' },
                        { value: 2, text: '不确定' }
                    ],
                    multiple: false
                },
                hobby: {
                    type: 'checkbox',
                    label: '爱好',
                    value: [], //当multiple为true时，value的值为数组类型
                    range: [
                        { value: 0, text: '吃饭' },
                        { value: 1, text: '睡觉' },
                        { value: 2, text: '打游戏' }
                    ],
                    multiple: true
                },
                province: {
                    type: 'combox',
                    label: '省份',
                    value: '',
                    range: ['北京', '南京', '东京', '武汉', '天津', '上海', '海口']
                },
                grade: {
                    type: 'picker',
                    label: '年级',
                    rules: [],
                    value: '',
                    range: [
                        {
                            text: '一年级',
                            value: '1-0',
                            children: [
                                {
                                    text: '1.1班',
                                    value: '1-1'
                                },
                                {
                                    text: '1.2班',
                                    value: '1-2'
                                }
                            ]
                        },
                        {
                            text: '二年级',
                            value: '2-0'
                        },
                        {
                            text: '三年级',
                            value: '3-0'
                        }
                    ],
                    placeholder: '请选择年级'
                },
                avatar: {
                    type: 'file',
                    label: '图片',
                    value: []
                }
            }
        };
    },
    methods: {
        sub(e) {
            console.log(e);
        }
    }
};
</script>

<style></style>

返回值

{
    "value": {
        "title": "sadfs",
        "age": "232",
        "name": "121",
        "alert": 1727382888000,
        "status": "",
        "sex": 0,
        "hobby": [],
        "province": "",
        "grade": "",
        "avatar": [
            "https://mp-a55cff5c-.....com/cloudstorage/4ce25b1b-9cce-4177-8fe5-1e1bfe58bcf2.jpg",
            "https://mp-a55cff5c-.....com/cloudstorage/ba1b6b21-bb8f-41bc-a3dc-9a8e088e56b2.jpg",
            "https://mp-a55cff5c-.....com/cloudstorage/8ea08f27-c2e6-4944-8d3a-7067bd86f97a.jpg"
        ]
    },
    "message": "success"
}