13--vue用cube-ui框架写注册页面

下载滴滴cube ui 框架： vue add cube-ui
框架链接： https://didi.github.io/cube-ui/#/zh-CN
在组件部分建一个register文件夹,以TheStudent.vue为例

建好后，要在App.vue里引入并写进模板：

<template>
  <div id="app">
		<the-student></the-student>
  </div>
</template>

<script>
import TheStudent from './components/register/TheStudent.vue'

export default {
  name: 'app',
  components: {
    TheStudent
  }
}
</script>
<style>

</style>

TheStudent.vue页面代码如下，可参考文档：
https://didi.github.io/cube-ui/#/zh-CN/docs/form

提醒：注意type后面的类型要加引号，除了布尔类型不加引号，还有数字不加引号！！！！！

<template>
	<div class="page">
		<cube-form :model="model" :schema="schema" :immediate-validate="false" :options="options" @validate="validateHandler"
		 @submit="submitHandler"></cube-form>
	</div>
</template>

<script>
	export default{
		data: function(){
			return {
				model: {
					// 学校编码	
					schoolid: '',
					tel: '',
					password: ''
				},
				schema: {
					fields: [{
							type: 'input',
							modelKey: 'schoolid',
							label: '学校编码',
							props: {
								type: 'number'
							},
							rules: {
								required: true,
								len: 6
							}
						},
						{
							type: 'input',
							modelKey: 'tel',
							label: '手机号',
							rules: {
								required: true,
								type: 'tel'
							}
						},
						{
							type: 'input',
							modelKey: 'password',
							label: '密码',
							props: {
								type: 'password',
								eye: {
									open: true,
									reverse: false
								}
							},
							rules: {
								required: true,
								min: 6,
								max: 10
							}
						},
						{
							type: 'submit',
							label: '注册'
						}
					]
				},
				options: {
					scrollToInvalidField: false,
					layout: 'classic'
				}
			}
		},
		methods: {
			validateHandler: function() {

			},
			submitHandler: function(e) {
				e.preventDefault()
			}
		}
	}
</script>

<style>
</style>

最后运行效果: