Vue 按enter键实现登陆

最新推荐文章于 2024-08-05 17:24:57 发布

坚持-不懈

最新推荐文章于 2024-08-05 17:24:57 发布

阅读量1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/luoqi12897/article/details/126548733

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
				margin: 0;
				background-image: url("img/bg.jpg");
				background-size: cover;
				/* cover专门用来设置全屏背景的 */
				text-align: center;
			}

			h1 {
				font-size: 72px;
				color: rgb(0, 150, 215);
				margin-bottom: 0;
			}

			img {
				width: 100px;
			}

			h2 {
				font-size: 32px;
				color: #0095d7;
				margin: 0;
			}
		</style>
	</head>
	<body @click="log()">
		<div id="app">
			<h1>欢迎来到登录界面</h1>
			<img src="img/shark.png" />
			<h2>Welcome</h2>
			<el-card style="width: 600px; height: 300px; background-color: rgba(255,255,255,0.3); margin: 0 auto;">

				<el-form label-width="60px" style="width: 400px; margin: 30px auto;">
					<el-form-item label="用户名">
						<el-input type="text" placeholder="请输入用户名" v-model="name"></el-input>
					</el-form-item>
					<el-form-item label="密码">
						<el-input type="password" placeholder="请输入密码" v-model="pwd"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" style="position: relative;right: 35px;" @click="login()" @keyup.enter="keyDown(e)">登录
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<!-- import CSS -->
		<link rel="stylesheet" href="./Element/css/eui.css">
		<!-- import Vue before Element -->
		<script src="./Element/js/vue.js"></script>
		<!-- import JavaScript -->
		<script src="./Element/js/eui.js"></script>
		<script>
			let v = new Vue({
				el: "#app",
				data: function() {
					return {
						user: {
							username: "admin",
							password: "123456"
						},
						name: "",
						pwd: ""
					}
				},
				methods: {
				    login() {
				      if (this.name == this.user.username && this.pwd == this.user.password) {
				      	alert("登录成功")
				      } else {
				      	alert("用户名或密码不正确")
				      }
				    },
				    
				    // 点击回车键登录
				    keyDown(e) {
				      // 回车则执行登录方法 enter键的ASCII是13
				      if (e.keyCode == 13 || e.keyCode == 100) {
				        this.login(); // 定义的登录方法
				      }
				    },
				  },
				  mounted() {
				    // 绑定监听事件
				    window.addEventListener("keydown", this.keyDown);
				  },
				  destroyed() {
				    // 销毁事件
				    window.removeEventListener("keydown", this.keyDown, false);
				  },
			})
		</script>
	</body>
</html>