vue3 鼠标点击，跟着显示坐标

爱生活，爱编程

于 2020-12-01 13:43:29 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： typescript composition

本文链接：https://blog.csdn.net/qq_15009739/article/details/110429435

这篇博客介绍了如何在Vue3中实现鼠标点击事件，动态显示点击位置的坐标。通过创建自定义hook，将跟随鼠标显示坐标的逻辑封装起来，方便在App.vue组件中直接使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
<div>
  <p>
    {x}--{y}
    {
  
  {x}}---{
  
  {y}}
  </p>
</div>
  
</template>

<script lang="ts">
import { defineComponent } from 'vue';
// import HelloWorld from './components/HelloWorld.vue';

import {ref, onMounted,onUnmounted} from "vue";

export default defineComponent({
  name: 'App',
  setup(){
    const x = ref(0);
    const y = ref(0);
    const dc = (e: MouseEvent)=>{
         console.log(e.pageX);
        console.log(e.pageY)
        x.value = e.pageX;
        y.value = e.pageY;
    }
  
    onMounted(()=>{
      document.addEventListener("click",dc);}
    )
   onMounted(()=>{
      document.addEventListener("click",dc);
   })
    return {
      x,y
    }
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50