使用了element-plus
文章来源地址https://www.toymoban.com/news/detail-627810.html
<template>
<div class="login-wrapper">
<!-- 背景图或者视频 -->
<div class="background" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;overflow: hidden;z-index:50;">
<video class="video-playerr__video" autoplay="" loop="" preload="none"
src="/public/high.mp4" playsinline="" muted="">
</video>
</div>
<!-- 登录框 -->
<div class="modal" style="background-color: #08070761;z-index:500" >
<el-form ref="userForm" :model="user" status-icon :rules="rules">
<div class="title">vue-real-admin</div>
<el-form-item prop="username">
<el-input
type="text"
prefix-icon="el-icon-user"
v-model="user.username"
/>
</el-form-item>
<el-form-item prop="password">
<el-input
type="password"
prefix-icon="el-icon-view"
v-model="user.password"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" class="btn-login" @click="login" style="height: 50px;" >登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "login",
data() {
return {
user: {
username: "admin",
password: "123456",
},
rules: {
username: [
{
required: true,
message: "请输入用户名",
trigger: "blur",
},
],
password: [
{
required: true,
message: "请输入密码",
trigger: "blur",
},
],
},
};
},
methods: {
login() {
this.$refs.userForm.validate((valid) => {
if (valid) {
console.log(this.user)
this.$api.login(this.user).then((res) => {
console.log(res);
if (typeof(res) == "undefined"||res==''||res==null) {
this.$message.error("登陆失败")
}else{
this.$message.success('登陆成功')
this.$store.commit("saveUserInfo", res.userinfo);
this.$router.push("/welcome");
}
// this.$message.success('登陆成功')
// this.$store.commit("saveUserInfo", res);
// this.$router.push("/welcome");
});
} else {
return false;
}
});
},
goHome() {
this.$router.push("/welcome");
},
},
};
</script>
<style lang="scss">
.login-wrapper {
display: flex;
justify-content: center;
align-items: center;
/*background-color: #f9fcff;*/
width: 100vw;
height: 100vh;
.el-input__inner{
height: 50px;
line-height: 50px;
}
.el-input__icon {
line-height: 50px;
}
.modal {
width: 700px;
padding: 100px;
background-color: #fff;
border-radius: 15px;
box-shadow: 0px 17px 26px 5px #0c0d0e4d;
.title {
font-size: 50px;
line-height: 1.5;
text-align: center;
color:#fff ;
margin-bottom: 30px;
}
.btn-login {
width: 100%;
}
}
}
</style>
文章来源:https://www.toymoban.com/news/detail-627810.html
到了这里,关于vue3登录页面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!