useMouseInElement

类别

Elements

导出体积

1.86 kB

上次更改

3 months ago

与元素相关的鼠标位置的响应式状态

示例

源码 playground (beta)

Hover me

x: 0
y: 0
sourceType: null
elementX: 0
elementY: 0
elementPositionX: 0
elementPositionY: 0
elementHeight: 0
elementWidth: 0
isOutside: true

Hover me, I'm an inline element

x: 0
y: 0
sourceType: null
elementX: 0
elementY: 0
elementPositionX: 0
elementPositionY: 0
elementHeight: 0
elementWidth: 0
isOutside: true

用法

vue

<script setup lang="ts">
import { useMouseInElement
 } from '@vueuse/core'
import { useTemplateRef
 } from 'vue'

const target
 = useTemplateRef
('target')

const { x
, y
, isOutside
 } = useMouseInElement
(target
)
</script>

<template>
  <div
 ref
="target
">
    <h1
>Hello world</h1
>
  </div
>
</template>

组件用法

vue

<template>
  <UseMouseInElement v-slot="{ elementX
, elementY
, isOutside
 }">
    x: {{ elementX
 }}
    y: {{ elementY
 }}
    是否在外部: {{ isOutside
 }}
  </UseMouseInElement>
</template>

指令使用

vue

<script setup lang="ts">
import { vMouseInElement
 } from '@vueuse/components'
import { UseMouseSourceType
 } from '@vueuse/core'

interface MouseInElementType {
  x
: number
  y
: number
  sourceType
: UseMouseSourceType

  elementX
: number
  elementY
: number
  elementPositionX
: number
  elementPositionY
: number
  elementHeight
: number
  elementWidth
: number
  isOutside
: boolean
}

const options
 = {
  handleOutside
: true
}
function onMouseInElement
({ x
, y
, sourceType
, elementX
, elementY
, elementPositionX
, elementPositionY
, elementHeight
, elementWidth
, isOutside
 }: MouseInElementType) {
  console
.log
(x
, y
, sourceType
, elementX
, elementY
, elementPositionX
, elementPositionY
, elementHeight
, elementWidth
, isOutside
)
}
</script>

<template>
  <textarea
 v-mouse-in-elem
ent="onMouseInElement
" />
  <!-- with options -->
  <textarea
 v-mouse-in-elem
ent="[
onMouseInElement
, 
options
]
" />
</template>

类型声明

显示类型声明

export interface MouseInElementOptions extends UseMouseOptions {
  /**
   * Whether to handle mouse events when the cursor is outside the target element.
   * When enabled, mouse position will continue to be tracked even when outside the element bounds.
   *
   * @default true
   */
  handleOutside
?: boolean
  /**
   * Listen to window resize event
   *
   * @default true
   */
  windowScroll
?: boolean
  /**
   * Listen to window scroll event
   *
   * @default true
   */
  windowResize
?: boolean
}
export interface UseMouseInElementReturn extends UseMouseReturn {
  elementX
: ShallowRef
<number>
  elementY
: ShallowRef
<number>
  elementPositionX
: ShallowRef
<number>
  elementPositionY
: ShallowRef
<number>
  elementHeight
: ShallowRef
<number>
  elementWidth
: ShallowRef
<number>
  isOutside
: ShallowRef
<boolean>
  stop
: () => void
}
/**
 * 与元素相关的响应式鼠标位置
 *
 * @see https://vueuse.org/useMouseInElement
 * @param target
 * @param options
 */
export declare function useMouseInElement
(
  target
?: MaybeElementRef
,
  options
?: MouseInElementOptions,
): {
  x
: ShallowRef
<number>
  y
: ShallowRef
<number>
  sourceType
: ShallowRef
<UseMouseSourceType
>
  elementX
: ShallowRef
<number, number>
  elementY
: ShallowRef
<number, number>
  elementPositionX
: ShallowRef
<number, number>
  elementPositionY
: ShallowRef
<number, number>
  elementHeight
: ShallowRef
<number, number>
  elementWidth
: ShallowRef
<number, number>
  isOutside
: ShallowRef
<boolean, boolean>
  stop
: () => void
}