vue+element-实时获取页面的xy坐标

今天没事的时候自己写着玩想到一个以前喜欢用jQuery写的实时获取坐标的这样一个事情，今天用vue简单的实现一下，因为我的windows在公司，我的mac没有安装node，所以今天的例子是直接使用cdn引入vue来实现的，简单的看一下。我用的hb写的vue，毕竟习惯了，我们今天要实现的是一个鼠标移动的时候可以实时拿到当前鼠标坐标的这样一个事情，大概呢就是这么一个东西：下面看源码：H...

金牛座咋了嘛

4590人浏览 · 2019-03-25 01:01:05

金牛座咋了嘛 · 2019-03-25 01:01:05 发布

今天没事的时候自己写着玩想到一个以前喜欢用jQuery写的实时获取坐标的这样一个事情，今天用vue简单的实现一下，因为我的windows在公司，我的mac没有安装node，所以今天的例子是直接使用cdn引入vue来实现的，简单的看一下。

我用的hb写的vue，毕竟习惯了，我们今天要实现的是一个鼠标移动的时候可以实时拿到当前鼠标坐标的这样一个事情，大概呢就是这么一个东西：

下面看源码：

Html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="vue-app">
			<p class="event-style" @mousemove="getXY">
			{{X}},{{Y}}
			</p>
		</div>
		<script src="js/event_Test.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

js：

new Vue({
	el:'#vue-app',
	data:{
		X:0,
		Y:0
	},
	methods:{
		getXY : function(event){
			this.X = event.offsetX;
			this.Y = event.offsetY;
		}
	}

});

css：

.event-style{
	width: 40vw;
	height: 30vh;
	border: 1px solid red;
	background: #333;
	color: #ffffff;
}

我的文件路径是这样的：

由于是一个例子，所以我没有写什么规范的注释，你们自己写的时候不要忘记加注释。

这里简单的说一下event，它本身是有很多的事件的，那么其中offsetX和offsetY就是坐标。具体有哪些对象呢？这里我打印了一下，你们看一下：

感兴趣的朋友可以一个一个的试试具体都是什么。

谢谢阅读！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^