博客

首先要这样再那样然后可以了，快去试试吧

下面进入正题哈！

要实现实时监听鼠标移动并获取当前坐标呢非常简单啦要注意的地方给你们标注了哦


第一

，定义自定义组件（创建一个新的纯js文件命名为utils.js⭐）

utils.js⭐
// 定义一个函数
import {ref,reactive,onMounted} from 'vue'⭐

//实时监听鼠标的动态
function MouseMovement(){
	// 定义默认的宽高
	const movement = reactive({w:window.pageXOffset,h:window.pageYOffset});
	onMounted(()=>{
		// 当窗口发生变化时候更新宽高
		window.addEventListener("mousemove",function(){
			movement.w = event.pageX;
			movement.h = event.pageY;
		})
	})
	// 返回size
	return movement;
}
// 导出函数
export {MouseMovement};⭐

第二

，然后进入你要使用的页面定义注意

引入

和

return

<template>
  <div class="about">
	<p>w:{{movement.w}},h:{{movement.h}}</p>
	 
  </div>
</template>
<script>
	// 导入reverseText
  import {MouseMovement} from './utils.js'⭐
  export default{
	  // 引用一个组件
	  setup(props,ctx){
		  const movement = MouseMovement()
		  return {movement};⭐
	  }
  }
	
</script>