vue+element踩坑记-实时获取页面的xy坐标
vue+element踩坑记-实时获取页面的xy坐标
何处锦绣不灰堆
发布于 2020-05-29 09:37:47
发布于 2020-05-29 09:37:47
今天没事的时候自己写着玩想到一个以前喜欢用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就是坐标。具体有哪些对象呢？这里我打印了一下，你们看一下：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-03-25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读