vue+node全栈移动商城【8】-vant新建注册页面

上一节咱们已经实现了注册页面的跳转，那么在这一节，咱们全用vant这个框架，把注册页面给完善起来。让它能够拥有基本的页面交互功能。
为下一步的登录、注册做好准备。

在左侧的导航里，向下滚动到，
NavBar 导航栏

先看【使用指南】把下面的代码加入到main.js中

import { NavBar } from 'vant';
Vue.use(NavBar);

然后根据我们的需要，在register.vue文件中的template中，加入以下代码，

<van-nav-bar
			:title=msg
			left-text="返回"
			left-arrow
			@click-left="goBackFn"
			/>

在register.vue文件中的script中，加入以下代码，

data(){
		return {
			msg:'注册页面',

			username:'',
			password:'',
			password2:'',

			userErr:'用户名不能为空',
			passErr:'密码不能为空'
		}
	},

methods:{
	// 回到上一步
	goBackFn(){
		this.$router.go(-1);
	}
}

现在你应该能够看到一个导航条，并且你点击返回的时候，能够返回到上一页。

接下来，咱们使用【Field 输入框】来实现用户输入的部分，
点击：Field 输入框，
查看文档的使用指南，把下面的代码，加入到main.js中，

import { Field } from 'vant';
Vue.use(Field);

我们使用Field的自定义类型，在register.vue文件中的template区域中，加入以下代码，

<van-field
    v-model="username"
    required
    clearable
    label="用户名"
    placeholder="请输入用户名"
    @click-icon="username=''"
    :error-message="userErr"
    />

<van-field
    v-model="password"
    type="password"
    required
    clearable
    label="密码"
    placeholder="请输入密码"
    @click-icon="username=''"
    :error-message="passErr"
    />

<van-field
    v-model="password2"
    type="password"
    required
    clearable
    label="重复密码"
    placeholder="请重复输入密码"
    @click-icon="username=''"
    :error-message="passErr"
    />

在script区域中加入以下代码，

data(){
	return {
		msg:'注册页面',

		username:'',
		password:'',
		password2:'',

		userErr:'用户名不能为空',
		passErr:'密码不能为空'
	}
}

这时，我们的register.vue注册页面，虽然还没有添加相应的js方法，但就页面来讲已经初步完成。

更快观看更多教程内容，请扫下方二维码，关注微信公众号：web前端教室，谢谢。更有前端学习群，让你组团学习，更快进步。

vue+node全栈移动商城【8】-vant新建注册页面

猜你喜欢