useMouse

Track cursor position

Code demonstration

Default Usage

Client - x: NaN, y: NaN

Page - x: NaN, y: NaN

Screen - x: NaN, y: NaN

Default UsageTracking cursor position.

复制成功!

<template>
  <div>
    <p>Client - x: {{ mouse.clientX }}, y: {{ mouse.clientY }}</p>
    <p>Page - x: {{ mouse.pageX }}, y: {{ mouse.pageY }}</p>
    <p>Screen - x: {{ mouse.screenX }}, y: {{ mouse.screenY }}</p>
  </div>
</template>

<script lang="ts" setup>
  import { useMouse } from 'vue-hooks-plus'
  const mouse = useMouse()
</script>

Mouse position relative to the element

element

Mouse In Element - x: NaN, y: NaN

Element Position - x: NaN, y: NaN

Element Dimensions - width: NaN, height: NaN

Mouse position relative to the elementBy passing in the target element, you can get the position of the mouse relative to the element.

复制成功!

<template>
  <div
    ref="domRef"
    :style="{
      width: '200px',
      height: '200px',
      backgroundColor: 'gray',
      opacity: 0.85,
      color: 'white',
      lineHeight: '200px',
      textAlign: 'center',
    }"
  >
    element
  </div>
  <div>
    <p>Mouse In Element - x: {{ mouse.elementX }}, y: {{ mouse.elementY }}</p>
    <p> Element Position - x: {{ mouse.elementPosX }}, y: {{ mouse.elementPosY }} </p>
    <p>
      Element Dimensions - width: {{ mouse.elementW }}, height:
      {{ mouse.elementH }}
    </p>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useMouse } from 'vue-hooks-plus'
  const domRef = ref(null)
  const mouse = useMouse(domRef)
</script>

API

const state: {
  screenX: number,
  screenY: number,
  clientX: number,
  clientY: number,
  pageX: number,
  pageY: number,
  elementX: number,
  elementY: number,
  elementH: number,
  elementW: number,
  elementPosX: number,
  elementPosY: number,
} = useMouse(target?: Target);

Params

Property	Description	Type
target	DOM element or ref	Element | () => Element | JSX.Element

Result

Property	Description	Type
screenX	Position left relative to the top left of the physical screen/monitor	number
screenY	Position top relative to the top left of the physical screen/monitor	number
clientX	Position left relative to the upper left edge of the content area	number
clientY	Position top relative to the upper left edge of the content area	number
pageX	Position left relative to the top left of the fully rendered content area in the browser	number
pageY	Position top relative to the top left of the fully rendered content area in the browser	number
elementX	Position left relative to the upper left edge of the target element	number
elementY	Position top relative to the upper left edge of the target element	number
elementH	Target element height	number
elementW	Target element width	number
elementPosX	The position of the target element left relative to the top left of the fully rendered content area in the browser	number
elementPosY	The position of the target element top relative to the top left of the fully rendered content area in the browser	number

Source

Source · Document · Demo