Hiding and showing login and registration
It is often used in development, and it will be more troublesome in registration and login, so here I use a case to illustrate:
1. After clicking on the main page, a login popup will pop up, and the default display is the login interface
HTML code
<!--
type: input的类型 text为“文本框” password为“密码框” submit为“按钮框”
name： 名称
id： 只有唯一的id值
placeholder： 输入框中默认的文字
v-model： 双向数据绑定
@blur： 绑定变量名
-->
<div class="login">
<div v-show="showLogin">
<div>
<input type="text" name="phone" id="phone" placeholder="请输入手机号" v-model="phone" @blur="phoneVerify()"/>
<!-- 将{
{}}绑定提示信息或者警告信息 当输入错误或者未输入进行信息提示 -->
<p>{
{phoneMessage}}</p>
</div>
<div >
<input type="password" name="password" id="password" placeholder="请输入密码" v-model="password" @blur="Passwordvalidation()"/>
<p>{
{pwdMessage}}</p>
</div>
<div>
<input type="submit" value="登陆" class="log" @click="login()"/>
</div>
<div>
<input type="submit" value="注册" class="register" v-on:click="ToRegister" />
</div>
</div>
</div>
JavaScript code
<script>
export default {
name:'Login',
data(){
return{
phone:'',
//登录手机号绑定的值
phoneMessage:'',
password:'',
//登录密码绑定的值
pwdMessage:'',
}
},
methods:{
/**隐藏登陆页面 */
hiddenLogin(){
this.$store.commit('hiddenLogin');
},
/**手机号码验证 */
phoneVerify(){
if(this.phone==''){
this.phoneMessage='请输入手机号';
return ;
}
else{
/**res.data.exist=1说明有此账号 */
_phoneVerify(this.phone).then(res=>{
if(res.data.exist!=1){
this.phoneMessage='手机号错误'
}else{
this.phoneMessage=''
}
})
}
},
// 密码验证
Passwordvalidation(){
if(this.password==''){
this.pwdMessage='请输入密码';
return;
}
},
/**登陆 */
login(){
_login(this.phone,this.password).then(res=>{
if(res.data.code!=200){
this.pwdMessage='密码错误';
}
else{
this.$store.commit('addUser',res.data);
this.hiddenLogin();
this.$bus.$emit('pullResource',res.data.cookie);
}
})
},
}
</script>
CSS code (for reference only, you can design by yourself)
.login {
width: 400px;
height: 560px;
position:relative;
z-index:999;
top:0px;
background: #fafafa;
}
.from-item {
color: red;
width: 60%;
margin: 0px auto;
padding: 10px 0px 10px 10px;
}
.from-item input{
margin: 10px;
}
input {
width: 200px;
height: 2em;
outline:none;
}
input.log:hover {
background: #c72e2e;
}
p {
font-size: 13px;
}
.log {
outline-style: none;
background: red;
color: #fff;
border: 0;
height: 40px;
border-radius: 10px;
cursor: pointer;
}
.register {
border: none;
background: none;
cursor: pointer;
}
So the login page is complete. Look at the renderings.
2. Now we want to click on register to jump to the registration page
2.1 Create another registered box package under the same level of DIV
HTML code
<div class="login">
<!-- 登录模块 -->
<div v-show="showLogin">
<div>
<input type="text" name="phone" id="phone" placeholder="请输入手机号" v-model="phone" @blur="phoneVerify()"/>
<!-- 将{
{}}绑定提示信息或者警告信息 当输入错误或者未输入进行信息提示 -->
<p>{
{phoneMessage}}</p>
</div>
<div >
<input type="password" name="password" id="password" placeholder="请输入密码" v-model="password" @blur="Passwordvalidation()"/>
<p>{
{pwdMessage}}</p>
</div>
<div>
<input type="submit" value="登陆" class="log" @click="login()"/>
</div>
<div>
<input type="submit" value="注册" class="register" v-on:click="ToRegister" />
</div>
</div>
<!-- 注册模块 -->
<div v-show="showRegister">
<div>
<input type="text" name="nickname" id="nickname" placeholder="请输入昵称" required v-model="nickname"/>
</div>
<div >
<input type="text" name="phone" id="phone" placeholder="请输入手机号" required v-model="phone" @blur="RegisterphoneVerify()"/>
<p>{
{registerphoneMessage}}</p>
</div>
<div>
<input type="password" name="password" id="password" placeholder="请输入密码" v-model="password" />
<p>{
{registerpwdMessage}}</p>
</div>
<div>
<input type="submit" value="确定" class="log" @click="login()"/>
</div>
<div>
<span v-on:click="ToLogin">跳回登录页面</span>
</div>
</div>
</div>
JavaScript code
<script>
export default {
name:'Login',
data(){
return{
phone:'',
//登录手机号绑定的值
phoneMessage:'',
password:'',
//登录密码绑定的值
pwdMessage:'',
// 登录页面默认显示为true
showLogin:true,
// 注册页面默认隐藏为false
showRegister:false,
registerphoneMessage:'',
nickname:'',
phone:'',
password:''
}
methods:{
//可将登录与注册的都写在一起我这里为了方面演示，将其分开了
// 跳转至注册页面，点击后showRegister就为显示页面了
//showLogin就为隐藏页面了
ToRegister(){
this.showRegister=true,
this.showLogin=false
},
// 跳转至登录页面，点击后注册页面就为隐藏页面
//登录页面就为显示页面了
ToLogin(){
this.showRegister=false,
this.showLogin=true
},
/**手机号码验证 */
RegisterphoneVerify(){
let regExp=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
this.registerphoneMessage='';
if(!regExp.test(this.phone)){
this.registerphoneMessage='手机格式不对'
}
}
}
},
Let’s take a look at the renderings. The
registration page jumps back to log in for demonstration purposes. You can make improvements yourself, and you can also add functions such as obtaining verification codes. The
above is all the content of this article, and you can also make improvements. For example, the registration page can be packaged into The component then makes component calls and so on on the Login page. Welcome everyone to come and communicate