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

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

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 Spring - 获取Bean工具类

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

偏执的太偏执、/ 2022年12月28日 12:52/ 0 赞/ 178 阅读

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

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

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

相关 Spring获取ApplicationContext的工具类

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

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

相关 Spring获取ApplicationContext的工具类

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

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

相关 WebUtils工具类获取Session

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

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

相关获取微信号的工具类

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

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

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

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

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