useMousePressed

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

基本用法

import { useMousePressed } from '@vueuse/core'

const { pressed } = useMousePressed()

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

import { useMousePressed } from '@vueuse/core'
// ---cut---
const { pressed } = useMousePressed({ touch: false })

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

<script lang="ts">
import { useMousePressed } from '@vueuse/core'
// ---cut---
import { useTemplateRef } from 'vue'

const el = useTemplateRef('el')

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

<template>
  <div ref="el">
    仅点击此元素将触发更新。
  </div>
</template>

组件用法

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

Type Declarations

export interface UseMousePressedOptions extends ConfigurableWindow {
  /**
   * Listen to `touchstart` `touchend` events
   *
   * @default true
   */
  touch?: boolean
  /**
   * Listen to `dragstart` `drop` and `dragend` events
   *
   * @default true
   */
  drag?: boolean
  /**
   * Add event listeners 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
}
/** @deprecated use {@link UseMousePressedOptions} instead */
export type MousePressedOptions = UseMousePressedOptions
export interface UseMousePressedReturn {
  pressed: ShallowRef<boolean>
  sourceType: ShallowRef<UseMouseSourceType>
}
/**
 * 反应性鼠标按下状态。由目标元素上的mousedown touchstart触发，并由窗口上的mouseup mouseleave touchend touchcancel释放。
 *
 * @see /useMousePressed
 * @param options
 */
export declare function useMousePressed(
  options?: UseMousePressedOptions,
): UseMousePressedReturn