当切换到短信登录时，非空验证触发不了，账号登录页面的没问题：
<html>
<head>
<title>登录</title>
<script src="./js/vue.js"></script>
<script src="./elementui/index.js"></script>
<script src="./js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="./elementui/theme-chalk/index.css">
<style scoped>
.login-page{
background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.login-title{
font-size: 20px;
}
.box-card {
width: 375px;
}
.login_title span{
margin: 0 20px 0 20px;
cursor: pointer;
}
.login_title span:hover{
color: #333;
font-weight: bolder;
}
.isActiveTitle{
color: #333;
font-weight: bolder;
}
.login_title{
text-align: center;
margin: 10px 20px 20px 20px;
font-size: 18px;
color: #666;
}
</style>
</head>
<body>
<div id="app">
<template>
<div class="login-page">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span class="login-title">🔐药品管理系统</span>
</div>
<div class="login-form">
<p class="login_title">
<span :class="isActiveIndex == 0 ? 'isActiveTitle' : ''" @click="accountLogin">账号登录</span><!-- 利用三元运算符判定点击了哪个登录,从而绑定样式 -->
<span :class="isActiveIndex == 1 ? 'isActiveTitle' : ''" @click="smsLogin">短信登录</span>
</p>
<el-form :model="loginForm" :rules="loginRules" ref="loginForm" v-if="isActive">
<el-form-item prop="account">
<el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="请输入用户名">
<template slot="prepend"><i style="font-size:20px" class="el-icon-user"></i></template>
</el-input>
</el-form-item>
<el-form-item prop="pwd">
<el-input type="password" v-model="loginForm.pwd" auto-complete="off" placeholder="请输入密码">
<template slot="prepend"><i style="font-size:20px" class="el-icon-key"></i></template>
</el-input>
</el-form-item>
<el-form-item>
<el-button style="width:100%;" type="primary" @click="handleLogin" :loading="loading">登录</el-button>
</el-form-item>
</el-form>
<el-form v-else :model="loginForm2" :rules="loginRules2" ref="loginForm2" >
<el-form-item prop="phone">
<el-input type="text" v-model="loginForm2.phone" auto-complete="off" placeholder="请输入手机号码">
<template slot="prepend"><i style="font-size:20px" class="el-icon-mobile-phone"></i></template>
</el-input>
</el-form-item>
<el-form-item prop="code">
<el-input type="text" v-model="loginForm2.code" auto-complete="off" placeholder="请输入验证码">
<template slot="prepend"><i style="font-size:20px" class="el-icon-message"></i></template>
</el-input>
</el-form-item>
<el-form-item>
<el-button style="width:100%;" type="primary" @click="handleLogin" :loading="loading">登录</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
</div>
</template>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
loading: false,
loginRules:{
account: [
{ required: true, message: '请输入账户', trigger: 'blur' },
],
pwd: [
{ required: true, message: '密码不能为空', trigger: 'blur'}
]
},
loginRules2:{
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur'}
]
},
isActive: true, // 用于实现切换登录，作为判断
isActiveIndex: 0,
loginForm: {
account: '',
pwd: ''
},
loginForm2: {
phone: '',
code: ''
}
},
methods:{
handleLogin(){
this.$refs.loginForm.validate().then(()=>{
this.loading = true;
//模拟异步请求后台接口 登录操作
setTimeout(()=>{
this.$router.push('/home');
this.loading = false;
}, 1000)
}).catch((error=>{
this.$message({
message: '输入错误！',
type: 'warning'
});
}))
},
accountLogin() { // 账号登录
this.isActive = true;
this.isActiveIndex = 0
},
smsLogin() { // 短信登录
this.isActive = false;
this.isActiveIndex = 1
},
}
});
</script>
</html>
