vue+elementui简约登录
一.导入js，css
<!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- import Vue before Element --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <!-- jquery --> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
二.主题内容
<div class="store-login" id="app"> <!-- 背景 --> <div class="bg-login"> <li v-for="bgimg in bgImages"> <img :src="bgimg"> </li> <!-- <li> <img src="./img/bg2.jpg"> </li> <li> <img src="./img/bg4.jpg"> </li> <li> <img src="./img/bg3.jpg"> </li> --> </div> <div class="login-s"> <!-- 登录表单 --> <el-form :model="loginForm" ref="LoginFormRef" :rules="loginFormRules" label-width="0px" class="login_form"> <!-- 用户名 --> <el-form-item prop="username"> <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input> </el-form-item> <!-- 密码 --> <el-form-item prop="password"> <el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input> </el-form-item> <!-- 按钮 --> <el-form-item class="btns"> <el-button type="primary" @click="login">登录</el-button> <el-button type="info" @click="resetLoginForm">重置</el-button> </el-form-item> </el-form> </div> </div>
三.javascript代码
<script>
new Vue({
el: '#app',
data: function() {
return {
//数据绑定
index: 0,
bgImages:[
'./img/bg1.jpg',
'./img/bg2.jpg',
'./img/bg3.jpg',
'./img/bg4.jpg',
],
show: {
diplay: 'blok',
},
loginForm: {
username: 'admin',
password: '123456'
},
//表单验证规则
loginFormRules: {
username: [{
required: true,
message: '请输入登录名',
trigger: 'blur'
},
{
min: 3,
max: 10,
message: '登录名长度在 3 到 10 个字符',
trigger: 'blur'
}
],
password: [{
required: true,
message: '请输入密码',
trigger: 'blur'
},
{
min: 6,
max: 15,
message: '密码长度在 6 到 15 个字符',
trigger: 'blur'
}
]
}
}
},
methods: {
//添加表单重置方法
resetLoginForm() {
//this=>当前组件对象，其中的属性$refs包含了设置的表单ref
// console.log(this)
this.$refs.LoginFormRef.resetFields()
},
login() {
//点击登录的时候先调用validate方法验证表单内容是否有误
this.$refs.LoginFormRef.validate(async valid => {
console.log(this.loginFormRules)
//如果valid参数为true则验证通过
if (!valid) {
return
}
//发送请求进行登录
const {
data: res
} = await this.$http.post('login', this.loginForm)
// console.log(res);
if (res.meta.status !== 200) {
return this.$message.error('登录失败:' + res.meta.msg) //console.log("登录失败:"+res.meta.msg)
}
this.$message.success('登录成功')
console.log(res)
//保存token
window.sessionStorage.setItem('token', res.data.token)
// 导航至/home
this.$router.push('/home')
})
},
changBg() {
// alert(11);
// const bglogin = document.getElementsByClassName("bg-login");
// console.log(bglogin);
if (this.index === 0) {
this.index = 3;
} else {
this.index = this.index - 1;
}
$(".bg-login>li:eq(" + this.index + ")").fadeIn("3000").siblings().fadeOut("3000");
console.log(this.index);
}
},
created() {
this.index = this.bgImages.length
setInterval(this.changBg, 7000);
}
})
</script>
四.代码样式
<style type="text/css"> *{ padding: 0; margin: 0; } body,html { width: 100%; height: 100%; } .store-login { background-color: white; height: 100%; position: relative; } .bg-login { /*background: url("../../public/img/3Dbg01.jpg") no-repeat;*/ /*background-size: 100% 100%;*/ position: relative; height: 100%; opacity: 0.8; z-index: 1; } .bg-login > li { list-style: none; /*display: none;*/ position: relative; width: 100%; height: 100%; position: absolute; } .bg-login > li > img { width: 100%; height: 100%; opacity: 0.9; transition: ease .5s; } .login-s { position: absolute; width: 350px; height: 400px; background-color: rgba(0, 0, 0, 0.3); top: 35%; left: 50%; transform: translate(-50%, -50%); border-radius: 8px; z-index: 2; box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.7); text-align: center; } .login_form { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0 30px; } </style>
五.效果图
预览地址：https://li_shang_shan.gitee.io/vue-element-ui-login/
个人学习，内容简略
