Skip to content

useMousePressed

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

¥Reactive mouse pressing state. Triggered by mousedown touchstart on target element and released by mouseup mouseleave touchend touchcancel on window.

示例

pressed: false
sourceType: null
Tracking on

基本用法

¥Basic Usage

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

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

¥Touching is enabled by default. To make it only detects mouse changes, set touch to false

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

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

¥To only capture mousedown and touchstart on specific element, you can specify target by passing a ref of the element.

vue
<script setup lang="ts">
import { 
useTemplateRef
} from 'vue'
const
el
=
useTemplateRef
<HTMLDivElement>('el')
const {
pressed
} =
useMousePressed
({
target
:
el
})
</script> <template> <
div
ref
="
el
">
Only clicking on this element will trigger the update. </
div
>
</template>

组件用法

¥Component Usage

vue
<template>
  <UseMousePressed v-slot="{ 
pressed
}">
Is Pressed: {{
pressed
}}
</UseMousePressed> </template>