useMousePressed

分类

传感器

导出大小

837 B

上次更改

上个月

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

演示

源码演练场 (beta)

pressed: false
sourceType: null

正在追踪

基本用法

import { useMousePressed
 } from '@vueuse/core'

const { pressed
 } = useMousePressed
()

默认启用触控。要使其仅检测鼠标变化，请将 touch 设置为 false。

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

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

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>

组件用法

此函数还通过 @vueuse/components 包提供了一个无渲染组件版本。了解更多用法。

vue

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

类型声明

显示类型声明

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 listeners with the `capture` option set to `true`
   * (see [MDN](https://mdn.org.cn/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
}
/**
 * Reactive mouse pressing state.
 *
 * @see https://vueuse.org.cn/useMousePressed
 * @param options
 */
export declare function useMousePressed
(options
?: MousePressedOptions): {
  pressed
: ShallowRef
<boolean, boolean>
  sourceType
: ShallowRef
<UseMouseSourceType
, UseMouseSourceType
>
}
export type UseMousePressedReturn
 = ReturnType
<typeof useMousePressed
>