pistachiouseMouseInElement
Distance in pixels from an element
Parameters
typescript
import { useMouseInElement } from '@elonehoo/pistachio'
useMouseInElement(element, options?, wait?)
import { useMouseInElement } from '@elonehoo/pistachio'
useMouseInElement(element, options?, wait?)
| Parameters | Type | Required | Default | Description |
|---|---|---|---|---|
| element | Ref<HTMLElement> | HTMLElement | true | Element | |
| options | boolean | AddEventListenerOptions | false | {passive: true} | Listener options |
| wait | number | false | undefined | Debounce event in ms |
State
The useMouseInElement function exposes the following reactive state:
typescript
import { useMouseInElement } from '@elonehoo/pistachio'
const { distance } = useMouseInElement()
import { useMouseInElement } from '@elonehoo/pistachio'
const { distance } = useMouseInElement()
| State | Type | Description |
|---|---|---|
| distance | Computed<number> | Distance in pixels from Element center |
Methods
The useMouseInElement function exposes the following methods:
typescript
import { useMouseInElement } from '@elonehoo/pistachio'
const { remove } = useMouseInElement()
import { useMouseInElement } from '@elonehoo/pistachio'
const { remove } = useMouseInElement()
| Signature | Description |
|---|---|
| remove | Manually removes the event listener |
Example
Mouse distance: -1px
vue
<script setup lang="ts">
import { ref } from 'vue'
import { useMouseInElement } from '@elonehoo/pistachio'
const el = ref(null)
const { distance } = useMouseInElement(el)
</script>
<template>
<div>
Mouse distance: <b>{{ distance }}px</b>
<div ref="el" style="height: 10px; width: 10px; background: #99CC99" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useMouseInElement } from '@elonehoo/pistachio'
const el = ref(null)
const { distance } = useMouseInElement(el)
</script>
<template>
<div>
Mouse distance: <b>{{ distance }}px</b>
<div ref="el" style="height: 10px; width: 10px; background: #99CC99" />
</div>
</template>