如何利用vue+element ui实现好看的登录界面
更新时间:2022年05月24日 09:11:05 作者:jackzjbaby
最近做了个最基础的ElementUI登录页,适合新手查看,所以下面这篇文章主要给大家介绍了关于如何利用vue+element ui实现好看的登录界面的相关资料,需要的朋友可以参考下
闲暇之余使用vue+element ui制作了个登录界面
话不多说,先上
界面效果图
下面直接上代码:
<template> <div class="loginbody"> <div class="logindata"> <div class="logintext"> <h2>Welcome</h2> </div> <div class="formdata"> <el-form ref="form" :model="form" :rules="rules"> <el-form-item prop="username"> <el-input v-model="form.username" clearable placeholder="请输入账号" ></el-input> </el-form-item> <el-form-item prop="password"> <el-input v-model="form.password" clearable placeholder="请输入密码" show-password ></el-input> </el-form-item> </el-form> </div> <div class="tool"> <div> <el-checkbox v-model="checked" @change="remenber" >记住密码</el-checkbox > </div> <div> <span class="shou" @click="forgetpas">忘记密码?</span> </div> </div> <div class="butt"> <el-button type="primary" @click.native.prevent="login('form')" >登录</el-button > <el-button class="shou" @click="register">注册</el-button> </div> </div> </div> </template> <script> import { login } from "@/api/login"; import { setToken } from "@/request/auth"; export default { name: "login", data() { return { form: { password: "", username: "", }, checked: false, rules: { username: [ { required: true, message: "请输入用户名", trigger: "blur" }, { max: 10, message: "不能大于10个字符", trigger: "blur" }, ], password: [ { required: true, message: "请输入密码", trigger: "blur" }, { max: 10, message: "不能大于10个字符", trigger: "blur" }, ], }, }; }, mounted() { if(localStorage.getItem("news")){ this.form=JSON.parse(localStorage.getItem("news")) this.checked=true } }, methods: { login(form) { this.$refs[form].validate((valid) => { if (valid) { login(this.form) .then((res) => { if (res.code === 200) { setToken(res.data.token); localStorage.setItem("USERNAME", res.data.username); this.$message({ message: "登录成功啦", type: "success", showClose: true, }); this.$router.replace("/"); } else { this.$message({ message: "账户名或密码错误", type: "error", showClose: true, }); } }) .catch((err) => { this.$message({ message: "账户名或密码错误", type: "error", showClose: true, }); }); } else { return false; } }); }, remenber(data){ this.checked=data if(this.checked){ localStorage.setItem("news",JSON.stringify(this.form)) }else{ localStorage.removeItem("news") } }, forgetpas() { this.$message({ type:"info", message:"功能尚未开发额😥", showClose:true }) }, register() {}, }, }; </script> <style scoped> .loginbody { width: 100%; height: 100%; min-width: 1000px; background-image: url("../assets/login2.jpg"); background-size: 100% 100%; background-position: center center; overflow: auto; background-repeat: no-repeat; position: fixed; line-height: 100%; padding-top: 150px; } .logintext { margin-bottom: 20px; line-height: 50px; text-align: center; font-size: 30px; font-weight: bolder; color: white; text-shadow: 2px 2px 4px #000000; } .logindata { width: 400px; height: 300px; transform: translate(-50%); margin-left: 50%; } .tool { display: flex; justify-content: space-between; color: #606266; } .butt { margin-top: 10px; text-align: center; } .shou { cursor: pointer; color: #606266; } /*ui*/ /* /deep/ .el-form-item__label { font-weight: bolder; font-size: 15px; text-align: left; } /deep/ .el-button { width: 100%; margin-bottom: 10px; } */ </style>
附加背景图片
总结
到此这篇关于如何利用vue+element ui实现好看的登录界面的文章就介绍到这了,更多相关vue+element ui登录界面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue中computed(计算属性)和watch(监听属性)的用法及区别说明
这篇文章主要介绍了Vue中computed(计算属性)和watch(监听属性)的用法及区别说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-07-07
最新评论