MoreHook

Appearance

Return to top
On this page

useMousePosition

捕捉鼠标方位

  • 分两种 1.点击触发 2.移动触发
  • 也分为全局触发和某个元素触发

Demo

source

offsetX(相对于自身): -1

offsetY(相对于自身): -1

pageX(相对于 body): -1

pageY(相对于 body): -1

Usage

html
<template>
  <div>
    <div
      ref="target"
      style="border: 1px solid red; width: 300px; height: 300px"
    ></div>
    <p>offsetX(相对于自身): {{ offsetX }}</p>
    <p>offsetY(相对于自身): {{ offsetY }}</p>
    <p>pageX(相对于 body): {{ pageX }}</p>
    <p>pageY(相对于 body): {{ pageY }}</p>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useMousePosition } from '@morehook/core'

const target = ref()

const { offsetX, offsetY, pageX, pageY } = useMousePosition({
  type: 'move',
  target
})
</script>

Type Declarations

typescript
/**
 * type: click(点击触发) move(移动触发) (默认 click)
 * target: 触发的元素 (默认 document.body)
 */
interface Options {
  type?: "click" | "move"
  target?: HTMLElement | Ref<HTMLElement>
  onSuccess?: () => void
}
/**
 * 捕捉鼠标方位
 * 分两种 1.点击触发 2.移动触发
 * 也分为全局触发和某个元素触发
 * @param options Options
 */
export declare function useMousePosition(options?: Options): {
  pageX: Ref<number>
  pageY: Ref<number>
  offsetX: Ref<number>
  offsetY: Ref<number>
}

Source

Source • Demo • Docs