usePointerPosition

Obtain the current mouse's latitude, longitude, and altitude reactively. Implement optional throttling based on vueuse's useThrottleFn.

Usage

<script setup>
// const { longitude, latitude, altitude } = usePointerPosition()

// If you prefer the array destructuring syntax.
const [lon, lat, alt] = usePointerPosition({
  throttle: 150 // Throttling for 150ms.
})
</script>

<template>
  <div>
    <div>lon : {{ lon }}</div>
    <div>lat : {{ lat }}</div>
    <div>height : {{ alt }}</div>
  </div>
</template>

demo

Type Declarations

Details

export interface UsePointerPositionOptions {
  throttle?: Parameters<typeof useThrottleFn>[1]
  longitudeToFixed?: number
  latitudeToFixed?: number
  heightToFixed?: number
}
/**
 * Obtain the current mouse's latitude, longitude, and altitude reactively.
 *
 * Implement optional throttling based on `vueuse`'s `useThrottleFn`.
 *
 * ## example
 * ```js
 *
 * // const { longitude, latitude, altitude } = usePointerPosition()
 *
 * // If you prefer the array destructuring syntax.
 * const [lon, lat, alt] = usePointerPosition({
 *   throttle: 150 // Throttling for 150ms.
 * })
 * ```
 */
export declare function usePointerPosition(
  options?: UsePointerPositionOptions,
): {
  longitude: Ref<string, string>
  latitude: Ref<string, string>
  altitude: Ref<string, string>
} & Ref<string, string>[]

Source

source • demo