useMousePressed

类别

Sensors

导出大小

786 B

最近修改

2 days ago

鼠标按下的反应状态。由目标元素上的 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

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

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

要仅在特定元素上捕获 mousedown 和 touchstart，你可以通过传递该元素的引用来指定 target。

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

<script setup lang="ts">
import { useTemplateRef } from 'vue'

const el = useTemplateRef('el')

const { pressed } = useMousePressed({ target: el })
</script>

<template>
  <div ref="el">
    Only clicking on this element will trigger the update.
  </div>
</template>

组件用法

🌐 Component Usage

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