cube-ui注册页的实现

<template>
    <div>
        <cube-form
            :model="model"
            :schema="schema"
            @submit="submitHandler">
        </cube-form>
    </div>
</template>

<script>
export default {
    data(){
        return {
            //model 就是整个表单需要的数据源
            model:{
                username:'',
                password:''
            },
            //schema 就是生成表单所定义的模式
            schema:{    
                fields:[
                    //用户名配置
                    {
                        type:'input',
                        modelkey:'username',
                        label:'用户名',
                        props:{
                            placeholder:'请输入用户名'
                        },
                        rules:{   
                            //校验规则
                            required:true,
                            type:'string',
                            min:3,
                            max:15
                        },
                        //失去焦点后检测
                        trigger:'blur',
                        messages:{
                            required:'用户名不能为空',
                            min:'用户名不能小于3个字符',
                            max:'用户名不能大于15个字符'
                        }   
                    },
                    //密码配置
                    {
                        type:'input',
                        modelkey:'password',
                        label:'密码',
                        props:{
                            placeholder:'请输入密码',
                            type:'password',
                            eye:{
                                open:false
                            }
                        },
                        rules:{
                            //校验规则不能为空
                            required:true
                        },
                        //失去焦点后检测
                        trigger:'blur'

                    },
                    //按钮配置
                    {
                        type:'submit',
                        label:'注册'
                    }
                ]
            }
        }
    },
    methods:{
        submitHandler(e){
            //阻止表单提交
            e.preventDefault(),
            console.log('我注册了')
        }
    }
}
</script>

<style  scoped>

</style>

运行效果图：