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

迈不过友情╰ 2023-09-25 22:13 64阅读 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 条评论，64人围观）

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

相关阅读

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

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

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

相关 python 获取鼠标的实时位置

运行环境 : python 3.6.0 1. 安装第三方库 pyautogui 1) 官方库 pip install pyautogui 2) 或者从清华

爱被打了一巴掌/ 2023年10月09日 12:52/ 0 赞/ 24 阅读

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

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

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

相关工具类---FTP工具类

1. 导入commons-net <dependency> <groupId>commons-net</groupId> <artif

古城微笑少年丶/ 2023年07月19日 03:40/ 0 赞/ 45 阅读

相关工具类---获取请求者IP工具类

public class IPUtil { / DESC : 获取请求者的IP @param request

傷城~/ 2023年07月10日 05:12/ 0 赞/ 14 阅读

相关工具类---获取Spring容器中Bean实例工具类

import org.springframework.context.ApplicationContext; import org.springframewor

我就是我/ 2023年03月12日 07:09/ 0 赞/ 36 阅读

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

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

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

相关 Spring获取ApplicationContext的工具类

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

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

相关获取微信号的工具类

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

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

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

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

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