配置组件

通过配置项 props 可以设置组件的配置参数

生成一个可以同是选择日期和时间的日期组件

<template>
    <form-create :rule="rule" v-model="fApi" :option="options"/>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                    {
                        type:'datePicker',
                        field:'date',
                        title:'日期+时间',
                        props:{
                            type:'datetime'
                        },
                    }
                ]
            }
            
        }
    }
</script>

组件的配置项可以在对应的UI框架的文档中查询, 以ElementUI为例:

查看 DatePicker 组件的配置项

1. 在 form-create 文档查看
2. 在 element-ui 文档查看 (opens new window)

生成一个被禁用的 input 组件

<template>
    <form-create :rule="rule" v-model="fApi" :option="options"/>
</template>

<script>
    export default {
        data(){
            return {
                fApi:{},
                options:{
                    onSubmit:(formData)=>{
                        alert(JSON.stringify(formData))
                    }
                },
                rule:[
                    {
                        type:'input',
                        field:'input',
                        title:'被禁用',
                        value:'disabled',
                        props:{
                            disabled: true
                        },
                    }
                ]
            }
            
        }
    }
</script>