一个 vue 登陆页面

下面第二个 vue3 + element-plus 的案例中登录成功和失败的提醒
最下面有原图

vue2 + element-ui

<template><!-- Login --><div id="login"><div id="login-form"><h1>登陆界面</h1><label for="name"><i class="el-icon-user-solid" style="color: #c1c1c1"></i></label><input type="text" placeholder="用户名" id="name" autocapitalize="off" v-model.trim=name aria-autocomplete="off"><p style="visibility: hidden">用户名为必填选项</p><label for="password"><i class="el-icon-right" style="color: #c1c1c1"></i></label><input type="password" placeholder="密码" id="password" autocapitalize="off" v-model.trim="password"><p style="visibility: hidden">密码为必填选项</p><div><el-button type="primary" v-on:click="inputInfo">登录</el-button><el-button type="info" v-on:click="resetInfo">重置</el-button></div></div></div>
</template><script>
export default {name: "Login",data: function () {return {name: '',password: '',}},methods: {// 清空当前填写信息resetInfo: function () {this.name = "";this.password = "";},// 验证信息是否正确inputInfo: function () {if (this.name !== "admin@qq.com") {this.password = "";return 'err';}if (this.password !== "12345678") {this.password = "";return 'err';}// 返回上面 , 提交信息this.requestInfo();// 跳转到 /homethis.$router.push("/home");}},computed: {},mounted() {// css transition 样式let input = document.querySelectorAll("input");let label = document.querySelectorAll("label")let is = document.querySelectorAll("i");for (let i = 0; i < input.length; i++) {input[i].addEventListener("click", function () {input[i].style.width = '70%';input[i].style.transition = '1s';label[i].style.width = '70%';label[i].style.transition = '1s';is[i].style.color = '#037db3';})input[i].addEventListener("blur", function () {input[i].style.width = '60%';input[i].style.transition = '1s';label[i].style.width = '60%';label[i].style.transition = '1s';is[i].style.color = '#c1c1c1';})}},watch: {// 动态监测,验证 input 中 值的输入name: function f() {let p = document.querySelectorAll("p");if (this.name.length < 1) {p[0].innerHTML = "用户名称应大于 1 ";}if (this.name.length >= 1) {p[0].style.visibility = "hidden";}if (this.name.length === 0) {p[0].style.visibility = "visible";}},password: function f() {let p = document.querySelectorAll("p");if (this.password.length < 8) {p[1].style.visibility = "visible";p[1].innerHTML = "用户密码应大于 8 ";}if (this.password.length >= 8) {p[1].style.visibility = "hidden";}if (this.password.length === 0) {p[1].innerHTML = "请重新输入密码";p[1].style.visibility = "visible";}}}
}
</script><style lang="less" scoped>
#login {width: 100vw;height: 100vh;overflow: hidden;position: relative;// 背景图片样式background-image: url("../assets/bgcolor.jpg");background-repeat: no-repeat;background-attachment: fixed;background-position: center;background-size: cover;
}#login-form {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 50vw;min-width: 300px;max-width: 400px;display: flex;flex-direction: column;background-color: rgba(0, 0, 0, 0.7);border-radius: 15px;// 表单 box-shadow 样式 好看box-shadow: 0 15px 25px rgba(0, 0, 0, .5);h1 {width: 60%;margin: 50px auto 0;color: #c1c1c1;text-align: center;}input {width: 60%;margin: 0 auto;// 注意 border outline 默认值outline: none;border: none;padding: 10px;border-bottom: 1px solid #fff;background: transparent;color: white;}label {width: 60%;margin: 0 auto;position: relative;top: 30px;left: -15px;}div {width: 60%;margin: 10px auto;display: flex;justify-content: center;align-content: center;}button {// rgbabackground-color: rgba(9, 108, 144, 0.5);margin: 10px 25px 40px 25px;}p {width: 60%;margin: 8px auto;position: relative;left: -15px;color: #ff0000;font-size: 8px;}
}
// 浏览器兼容 , 针对谷歌浏览器 默认设置的 奇怪样式
input {-webkit-text-fill-color: #ffffff !important;transition: background-color 5000s ease-in-out ,width 1s ease-out!important;
}</style>

vue3 + element-plus

<template><div id="login"><div id="login-form" @keyup.enter="inputInfo"><h1>登陆界面</h1><label for="username"><i class="el-icon-user-solid" style="color: #c1c1c1"></i></label><input type="text" placeholder="用户名" name="username" id="username" autocapitalize="off" v-model.trim=username aria-autocomplete="off"><label for="password"><i class="el-icon-right" style="color: #c1c1c1"></i></label><input type="password" placeholder="密码" name="password" id="password" autocapitalize="off" v-model.trim="password"><div><el-button type="primary" v-on:click="inputInfo">登录</el-button><el-button type="info"  @click="open2" v-on:click="resetInfo">重置</el-button></div></div></div>
</template><script>
import { ElButton,ElNotification  } from 'element-plus'
import request from "@/network/request"
export default {name: "UserLogin",components: {ElButton},data: function () {return {username: '',password: '',}},methods: {inputInfo: function () {request({url: '/user/login',method: 'POST',params: {username: this.username,password: this.password}}).then(res => {if (res.data.code === 200) {ElNotification({title: 'Success',message: '登录成功 请稍等...',type: 'success',});this.$router.push({path: '/index'})} else {ElNotification.error({title: '用户名或者密码错误',message: res.data.msg})}}).catch(res => {ElNotification({title: 'Error',message: '用户名或者密码错误',type: 'error',});})},resetInfo: function () {this.username = ''this.password = ''},open2: function () {if (this.username != '' || this.password != '') {ElNotification({title: 'Success',message: '用户名和密码将被清空',type: 'success',});return;} else {ElNotification({title: 'Error',message: '请不要重复此操作',type: 'error',});}}}
}
</script><style lang="scss" scoped>
#login {width: 100vw;height: 100vh;overflow: hidden;position: relative;background-image: url("../assets/images/bg.jpg");background-repeat: no-repeat;background-attachment: fixed;background-position: center;background-size: cover;
}#login-form {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 50vw;min-width: 300px;max-width: 400px;display: flex;flex-direction: column;background-color: rgba(0, 0, 0, 0.7);border-radius: 15px;box-shadow: 0 15px 25px rgba(0, 0, 0, .5);h1 {width: 60%;margin: 50px auto 20px;color: #c1c1c1;text-align: center;}input {width: 60%;margin: 15px auto;outline: none;border: none;padding: 10px;border-bottom: 1px solid #fff;background: transparent;color: white;}label {width: 60%;margin: 0 auto;position: relative;top: 30px;left: -15px;}div {width: 60%;margin: 10px auto;display: flex;justify-content: center;align-content: center;}button {// rgbabackground-color: rgba(9, 108, 144, 0.5);margin: 10px 25px 40px 25px;}p {width: 60%;margin: 8px auto;position: relative;left: -15px;color: #ff0000;font-size: 8px;}
}input {-webkit-text-fill-color: #ffffff !important;transition: background-color 5000s ease-in-out ,width 1s ease-out!important;
}
</style>

一个 vue 登陆页面相关推荐

用java编写一个微博登陆页面
上次也写了一个微博登陆页面,不过功能还不够完善.今天重新完善了一些功能,分享出来给大家. 基本功能如下: (1)具有类似新浪微博的用户注册图形界面. (2)使用用户名或手机号注册,注册时需要提供新密码 ...
给大家推荐一个Vue 单页面程序无法SEO的解决办法
给大家推荐一个vue 单页面搜索引擎无法SEO的解决办法这两天用Vue3做了一个免费下载书籍的小网站,https://book.usejs.cn:大家可以先看下效果前端项目做完.部署了之后想让搜索 ...
搭建一个vue小页面（入门vue）
最近在学习vue框架,找了很久在网上找到下面这篇博客,觉得写得通俗易懂,就是其中有些代码尝试了有一点点的小问题,我猜可能版本不同的问题,造成不同的结果,但框架的思想我是觉得写得很通俗易懂的,供大家共享 ...
搭建一个vue小页面
本文转自http://blog.csdn.net/joshua_hit/article/details/59635160 继续搞Vuejs的前端,在之前我已经在Windows系统上配置好了一个初始的v ...
404 单页应用报错路由_通过 Laravel 创建一个 Vue 单页面应用（五）
文章转发自专业的Laravel开发者社区,原始链接:https://learnku.com/laravel/t/34858 我们在第4部分完成了编辑用户的功能,并且学习了如何使用 v-model 来监 ...
Java登陆页面经常出现的问题,问一下关于登陆页面的有关问题
问一下关于登陆页面的问题今天照着参考书做一个jsp登陆页面的练习,页面成功显示,但是我点击按钮不会登陆代码我是照着书打上去的大家帮我看一下吧 login.jsp 登陆登陆名: alt=会员名 ...
wicket学习笔记（2）：简单登陆页面的创建
这次整理了先前大概wicket学习使用的简单东西,创建了一个简单登陆页面.主要用来学习以下知识点内容. wicket基础配置文件等见上一篇文章: wicket学习笔记(1):入门篇页面效果如下(用来 ...
在不使用ssr的情况下解决Vue单页面SEO问题
遇到的问题: 近来在写个人博客的时候遇到了大家可能都会遇到的问题 Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 ...
Vue 单页面应用把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办???(比如登陆页面)
<div class="all" v-if="$route.path!=='/login'" > Vue 单页面应用把公共组件放在 app.v ...

一个 vue 登陆页面

vue2 + element-ui

vue3 + element-plus

一个 vue 登陆页面相关推荐

最新文章

热门文章