更新记录

0.0.1（2023-03-28） 下载此版本

init

平台兼容性

wgh-form 表单

基本用法

<template>
    <view>
        <wgh-form :items="items" :labelWidth="'auto'"></wgh-form>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                items: {
                    name: {
                        lable: '姓名',
                        placeholder: '请填写姓名',
                        fieldName: 'name',
                        type: 'text',
                        required: true,
                        rules: [{
                            required: true,
                            errorMessage: '姓名不能为空'
                        }]
                    },
                    desc: {
                        lable: '描述',
                        placeholder: '请填写描述',
                        fieldName: 'desc',
                        type: 'textarea',
                        required: false,
                        rules: [{
                            required: true,
                            errorMessage: '姓名不能为空'
                        }]
                    },
                    type: {
                        lable: '单选',
                        placeholder: '请选择类型',
                        fieldName: 'type',
                        type: 'select',
                        required: true,
                        options: [{
                                value: '1',
                                text: '类型1'
                            },
                            {
                                value: '2',
                                text: '类型2'
                            },
                        ],
                        rules: [{
                            required: true,
                            errorMessage: '类型必选'
                        }]
                    },
                    types: {
                        lable: '多选',
                        placeholder: '请选择类型',
                        fieldName: 'types',
                        type: 'select-multiple',
                        required: true,
                        options: [{
                                value: '1',
                                text: '类型1'
                            },
                            {
                                value: '2',
                                text: '类型2'
                            },
                        ],
                        rules: [{
                            required: true,
                            errorMessage: '类型必选'
                        }]
                    },
                    sex: {
                        lable: '性别',
                        placeholder: '请选择性别',
                        fieldName: 'sex',
                        type: 'radio',
                        required: true,
                        disabled: false,
                        style: {
                            alignItems: 'center',
                            border: '1px solid red'
                        },
                        options: [{
                                value: '0',
                                text: "女"
                            },
                            {
                                value: '1',
                                text: "男"
                            },
                        ],
                        rules: [{
                            required: true,
                            errorMessage: '性别必选'
                        }]
                    },
                    checkbox: {
                        lable: '复选',
                        placeholder: '请选择性别',
                        fieldName: 'checkbox',
                        type: 'checkbox',
                        required: true,
                        disabled: false,
                        style: {
                            alignItems: 'center',
                        },
                        options: [{
                                value: '0',
                                text: "红色"
                            },
                            {
                                value: '1',
                                text: "黑色"
                            },
                            {
                                value: '2',
                                text: "黄色"
                            },
                        ],
                        rules: [{
                            required: true,
                            errorMessage: '性别必选'
                        }]
                    },
                    date: {
                        lable: '日期',
                        placeholder: '请选择日期',
                        fieldName: 'date',
                        type: 'datetime',
                        originalType: 'date', // 组件原始的取值，值域：date/daterange/datetime/datetimerange
                        required: true,
                        disabled: false,
                        style: {
                            alignItems: 'center',
                        },
                        rules: [{
                            required: true,
                            errorMessage: '性别必选'
                        }]
                    },
                    dateTime: {
                        lable: '日期时间',
                        placeholder: '请选择日期时间',
                        fieldName: 'dateTime',
                        type: 'datetime',
                        originalType: 'datetime', // 组件原始的取值，值域：date/daterange/datetime/datetimerange
                    },
                    daterange: {
                        lable: '日期时间',
                        placeholder: '请选择日期时间',
                        fieldName: 'daterange',
                        type: 'datetime',
                        originalType: 'daterange', // 组件原始的取值，值域：date/daterange/datetime/datetimerange
                    },
                    datetimerange: {
                        lable: '日期时间',
                        placeholder: '请选择日期时间',
                        fieldName: 'datetimerange',
                        type: 'datetime',
                        originalType: 'datetimerange', // 组件原始的取值，值域：date/daterange/datetime/datetimerange
                    },

                }

            }
        },
        methods: {

        }
    }
</script>

<style>

</style>