Skip to content

useMousePressed

类别
导出体积
837 B
上次更改
7 months ago

鼠标按下状态的响应式状态。在目标元素上触发 mousedown touchstart,在窗口上释放 mouseup mouseleave touchend touchcancel

示例

pressed: false
sourceType: null
开启追踪

基本用法

ts
import { 
useMousePressed
} from '@vueuse/core'
const {
pressed
} =
useMousePressed
()

默认情况下启用触摸。要使其仅检测鼠标变化,将 touch 设置为 false

ts
const { 
pressed
} =
useMousePressed
({
touch
: false })

要仅捕获特定元素上的 mousedowntouchstart,可以通过传递元素的 ref 来指定 target

vue
<script lang="ts">
import { 
useTemplateRef
} from 'vue'
const
el
=
useTemplateRef
<HTMLDivElement>('el')
const {
pressed
} =
useMousePressed
({
target
:
el
})
</script> <template> <
div
ref
="
el
">
仅点击此元素将触发更新。 </
div
>
</template>

组件用法

vue
<template>
  <UseMousePressed v-slot="{ 
pressed
}">
是否按下: {{
pressed
}}
</UseMousePressed> </template>

类型声明

显示类型声明
ts
export interface MousePressedOptions extends ConfigurableWindow {
  /**
   * Listen to `touchstart` `touchend` events
   *
   * @default true
   */
  
touch
?: boolean
/** * Listen to `dragstart` `drop` and `dragend` events * * @default true */
drag
?: boolean
/** * Add event listerners with the `capture` option set to `true` * (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#capture)) * * @default false */
capture
?: boolean
/** * Initial values * * @default false */
initialValue
?: boolean
/** * Element target to be capture the click */
target
?:
MaybeComputedElementRef
/** * Callback to be called when the mouse is pressed * * @param event */
onPressed
?: (
event
: MouseEvent | TouchEvent | DragEvent) => void
/** * Callback to be called when the mouse is released * * @param event */
onReleased
?: (
event
: MouseEvent | TouchEvent | DragEvent) => void
} /** * 反应性鼠标按下状态。由目标元素上的mousedown touchstart触发,并由窗口上的mouseup mouseleave touchend touchcancel释放。 * * @see https://vueuse.org/useMousePressed * @param options */ export declare function
useMousePressed
(
options
?: MousePressedOptions): {
pressed
:
ShallowRef
<boolean, boolean>
sourceType
:
ShallowRef
<
UseMouseSourceType
,
UseMouseSourceType
>
} export type
UseMousePressedReturn
=
ReturnType
<typeof
useMousePressed
>

源码

源码演示文档

贡献者

Anthony Fu
一纸忘忧
IlyaL
wheat
IlyaL
丶远方
SerKo
Robin
Fernando Fernández
Robin
Anthony Fu
Meet you
Chris-Robin Ennen
Jonas Schade
RAX7
ByMykel
vaakian X
MinatoHikari
Marshall Thompson
Shinigami
Alex Kozack

更新日志

8c521 - feat(components)!: refactor components and make them consistent (#4912)
dd316 - feat: use passive event handlers everywhere is possible (#4477)
a123a - feat: add onPressed and onReleased as options (#4425)
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
17f97 - fix: change type of element parameter to MaybeComputedElementRef (#3566)
d5c81 - feat: add capture option (#3392)