element ui登录界面_Vue和Element-UI做一个简单的登录页面
如下所示，是vue+ElementUI寫的一個登錄頁面：
Login.vue部分
class="demo-ruleForm login-container">
登陸界面
記住密碼
@click.native.prevent="handleSubmit" :loading="logining">登錄
CSS部分：
.login-container {
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
background-clip: padding-box;
margin: 180px auto;
width: 350px;
padding: 35px 35px 15px 35px;
border: 1px solid #eaeaea;
background: #2d3a4b;
color: #fff;
.title {
margin: 0px auto 40px auto;
text-align: center;
}
.remember {
margin: 0px 0px 35px 0px;
}
.loginBtn {
width: 100%;
font-size: 20px;
letter-spacing: 10px;
}
}
JS部分：
import { requestLogin } from '../api/api';
export default {
data(){
return {
logining: false,
loginForm: {
account: 'admin',
checkPass: '123456'
},
loginRules: {
account: [
{required: true, message: '請輸入賬號', trigger: 'blur'},
],
checkPass: [
{required: true, message: '請輸入密碼', trigger: 'blur'},
]
},
checked: true
}
},
methods: {
handleSubmit(ev){
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.logining = true;
var loginParams = {username: this.loginForm.account, password: this.loginForm.checkPass};
requestLogin(loginParams).then(data => {
this.logining = false;
let { msg, code, user } = data;
if (code !== 200) {
this.$message({
message: msg,
type: 'error'
});
} else {
sessionStorage.setItem('user', JSON.stringify(user));
this.$router.push({path: '/home'});
}
});
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
總結(jié)
以上是生活随笔為你收集整理的element ui登录界面_Vue和Element-UI做一个简单的登录页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 创业冲突的五种解决方法是_当创业合伙人发
- 下一篇： The Majesty Of Vue.j