Skip to content

useMouse

类别
导出体积
1.08 kB
上次更改
7 months ago

鼠标位置的响应式状态

示例

基本用法

x: 0
y: 0
sourceType: null

reactive的使用

x: 0
y: 0
sourceType: null

基本用法

ts
import { 
useMouse
} from '@vueuse/core'
const {
x
,
y
,
sourceType
} =
useMouse
()

默认情况下启用了触摸功能。要仅检测鼠标变化,请将 touch 设置为 falsedragover 事件用于跟踪拖动时的鼠标位置。

ts
const { 
x
,
y
} =
useMouse
({
touch
: false })

自定义提取器

还可以提供自定义提取器函数来从事件中获取位置信息。

ts
import type { 
UseMouseEventExtractor
} from '@vueuse/core'
import {
useMouse
,
useParentElement
} from '@vueuse/core'
const
parentEl
=
useParentElement
()
const
extractor
:
UseMouseEventExtractor
=
event
=> (
event
instanceof
MouseEvent
? [
event
.
offsetX
,
event
.
offsetY
]
: null ) const {
x
,
y
,
sourceType
} =
useMouse
({
target
:
parentEl
,
type
:
extractor
})
js
import { useMouse, useParentElement } from '@vueuse/core'
const parentEl = useParentElement()
const extractor = (event) =>
  event instanceof MouseEvent ? [event.offsetX, event.offsetY] : null
const { x, y, sourceType } = useMouse({ target: parentEl, type: extractor })

组件使用

vue
<template>
  <UseMouse v-slot="{ 
x
,
y
}">
x: {{
x
}}
y: {{
y
}}
</UseMouse> </template>

类型声明

显示类型声明
ts
export type 
UseMouseCoordType
= "page" | "client" | "screen" | "movement"
export type
UseMouseSourceType
= "mouse" | "touch" | null
export type
UseMouseEventExtractor
= (
event
: MouseEvent | Touch,
) => [
x
: number,
y
: number] | null | undefined
export interface UseMouseOptions extends ConfigurableWindow, ConfigurableEventFilter { /** * 基于页面、客户端、屏幕或相对于上一个位置的鼠标位置 * * @default 'page' */
type
?:
UseMouseCoordType
|
UseMouseEventExtractor
/** * 在`target`元素上监听事件 * * @default 'Window' */
target
?:
MaybeRefOrGetter
<Window | EventTarget | null | undefined>
/** * 监听 `touchmove` 事件 * * @default true */
touch
?: boolean
/** * 在窗口上监听 `scroll` 事件,仅在 `type` 为 `page` 时有效 * * @default true */
scroll
?: boolean
/** * 当触发 `touchend` 事件时重置为初始值 * * @default false */
resetOnTouchEnds
?: boolean
/** * 初始值 */
initialValue
?:
Position
} /** * 响应式鼠标位置。 * * @see https://vueuse.org/useMouse * @param options */ export declare function
useMouse
(
options
?: UseMouseOptions): {
x
:
ShallowRef
<number, number>
y
:
ShallowRef
<number, number>
sourceType
:
ShallowRef
<
UseMouseSourceType
,
UseMouseSourceType
>
} export type
UseMouseReturn
=
ReturnType
<typeof
useMouse
>

源码

源码演示文档

贡献者

Anthony Fu
一纸忘忧
Robin
Anthony Fu
青椒肉丝
Jelf
IlyaL
IlyaL
Fernando Fernández
Robin
Eduardo Luiz Schilling
karukenert
Cats Juice
丶远方
RAX7
François Lévesque
vaakian X
Sergey Danilchenko
lzdFeiFei
Scott Bedard
Marshall Thompson
Shinigami
wheat
Alex Kozack
Antério Vieira

更新日志

8c521 - feat(components)!: refactor components and make them consistent (#4912)
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
ce9e5 - fix: check for MouseEvent instead of Touch to work with FF (#4457)
dd316 - feat: use passive event handlers everywhere is possible (#4477)
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
cceeb - fix: correct spelling error (#4348)
e8d11 - fix: record the previous scroll value (#4244)
c2f64 - fix: position won't be changed on page scroll when type is page, closes #2922 (#3244)