<el-form-item>
<el-button type="primary" size="small" @click="login">登录</el-button>
<el-button type="info" size="small" @click="resetLogin">重置</el-button>
</el-form-item>
关于element里两个方法的解释
有了token值 才可实现页面的跳转
//存入token值 没有接口
window.sessionStorage.setItem("token",123)
this.$router.push('/home')
//有接口
window.sessionStorage.setItem("token",res.data.token)
this.$router.push('/home')
<template>
<div class="login">
<div class="login_box">
<!-- 頭像區域 -->
<div class="img_box">
<img :src="imgUrl" alt="" srcset="" />
</div>
<!-- 表單區域 -->
<el-form
label-width="80px"
class="login_form"
ref="loginFrom"
:model="loginFrom"
:rules="loginRules"
hide-required-asterisk="true"
>
<el-form-item label="用户名" prop="userName">
<el-input
v-model.trim="loginFrom.userName"
prefix-icon="el-icon-user"
></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
v-model.trim="loginFrom.password"
prefix-icon="el-icon-goods"
type="password"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="login">登录</el-button>
<el-button type="info" size="small" @click="resetLogin">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import imgPath from "@/assets/logo.png";
export default {
data() {
return {
// imgUrl: require('@/assets/logo.png'), 插入图片
imgUrl: imgPath,
//登录表单的数据绑定对象
loginFrom: {
userName: "",
password: "",
},
//登录表单的路由规则
loginRules: {
userName: [
{ required: true, message: "用户名不能为空", trigger: "blur" },
],
password: [
{ required: true, message: "密码s不能为空", trigger: "blur" },
{ min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
],
}
};
},
methods: {
//登录
login(){
this.$refs.loginFrom.validate(valid=>{ //表单登录前的预验证 满足路由rules里的条件 返回布尔值
console.log(!valid);
if (!valid) return; //!valid取反 不满足条件意味false 为false就返回
window.sessionStorage.setItem("token",123) //没有接口 存的假token
this.$router.push('/home') //有了token 才可实现跳转
})
},
//重置按钮
resetLogin(){
this.$refs.loginFrom.resetFields(); //清除信息
}
},
};
</script>
<style scoped>
.login {
height: 100vh;
width: 100%;
background-color: #2b4b6b;
}
.login_box {
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.img_box {
height: 130px;
width: 130px;
border: 2px solid #eee;
border-radius: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 0 0 0 2px #ddd;
}
.img_box img {
width: 100%;
height: 100%;
border-radius: 50%;
padding: 2px;
}
.login_form {
position: absolute;
top: 30%;
left: 10%;
}
</style>