【前端工具类】003-实时获取鼠标位置的工具类：useMousePosition

迈不过友情╰ 2023-09-25 22:13 15阅读 0赞

## 【前端工具类】003-实时获取鼠标位置的工具类：useMousePosition ##

#### 文章目录 ####

*  【前端工具类】003-实时获取鼠标位置的工具类：useMousePosition
 *  一、Vue3 usexxx 写法
 *   *  1、代码
     *  2、使用示例

## 一、Vue3 usexxx 写法 ##

### 1、代码 ###

import {
         ref, onMounted, onUnmounted } from "vue";
    
    export function useMousePosition() {
        
      const x = ref(0);
      const y = ref(0);
    
      function handleMouseMove(event: MouseEvent) {
        
        x.value = event.clientX;
        y.value = event.clientY;
      }
    
      onMounted(() => {
        
        document.addEventListener("mousemove", handleMouseMove);
      });
    
      onUnmounted(() => {
        
        document.removeEventListener("mousemove", handleMouseMove);
      });
    
      return {
         x, y };
    }

### 2、使用示例 ###

<template>
      <div>
        <p>鼠标当前位置：({
        {
         position.x }}, {
        {
         position.y }})</p>
      </div>
    </template>
    
    <script>
    import {
         useMousePosition } from "@/hooks/useMousePosition";
    
    export default {
        
      setup() {
        
        const position = useMousePosition();
    
        return {
         position };
      },
    };
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关利用X11获取鼠标实时位置

在Linux系统中，可以使用X11库来获取鼠标实时位置。首先需要安装X11库，然后编写一个程序，调用X11库中的函数来获取鼠标位置。以下是一个简单的示例程序： i

柔情只为你懂/ 2024年03月24日 11:38/ 0 赞/ 6 阅读

相关【前端工具类】003-实时获取鼠标位置的工具类：useMousePosition

【前端工具类】003-实时获取鼠标位置的工具类：useMousePosition 文章目录【前端工具类】003-实时获取鼠标位置的工具类：useMouseP

迈不过友情╰/ 2023年09月25日 22:13/ 0 赞/ 16 阅读

相关 JavaScript经典案例：实时获取鼠标位置

效果展示：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

爱被打了一巴掌/ 2022年11月20日 01:53/ 0 赞/ 143 阅读

相关 Spring获取ApplicationContext的工具类

在项目中，经常遇到这样的问题：有些类需要使用new来创建对象，但是类中需要使用spring容器中定义的bean，此时无法通过spring的自动注入来注入我们需要使用的b

r囧r小猫/ 2022年07月12日 13:41/ 0 赞/ 144 阅读

相关 Spring获取ApplicationContext的工具类

工具类实现ApplicationContextAware接口，并重写setApplicationContext(ApplicationContext applicationCo

桃扇骨/ 2022年05月17日 09:35/ 0 赞/ 179 阅读

相关获取IP地址工具类

权限系统IP工具类 @Slf4j public class IpUtil { public final static Stri

快来打我*/ 2022年05月12日 04:00/ 0 赞/ 277 阅读

相关 WebUtils工具类获取Session

import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServ

清疚/ 2022年03月14日 15:34/ 0 赞/ 214 阅读

相关 SpringContextHolder工具类获取Bean

源码 package com.sto.rookie.util; import java.util.Map; import or

叁歲伎倆/ 2022年02月28日 23:54/ 0 赞/ 347 阅读

相关获取微信号的工具类

package cn.itsource.wechat.controller; import java.io.IOException; impo

我就是我/ 2022年01月23日 11:07/ 0 赞/ 127 阅读

相关获取系统时间的工具类

package com.page.util; import java.text.DateFormat; import java.text.SimpleDateFo

ゞ浴缸里的玫瑰/ 2021年11月11日 13:31/ 0 赞/ 211 阅读