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

偏执的太偏执、 2022-02-28 06:14 945阅读 0赞

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9jbGVhcmxvdmUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70][]

下面看源码：

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;
    }

我的文件路径是这样的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9jbGVhcmxvdmUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9jbGVhcmxvdmUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 2][] 感兴趣的朋友可以一个一个的试试具体都是什么。

谢谢阅读！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9jbGVhcmxvdmUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20220228/84f6f05b4c3146b0b6c254344e8484e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9jbGVhcmxvdmUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]: /images/20220228/d52af6bda69846bd92515e044df61883.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9jbGVhcmxvdmUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 2]: /images/20220228/68531ea0ea3042c8ba265e75bf7ec44c.png