useMousePressed

分類

Sensors

匯出大小

735 B

上次變更

3 週前

響應式滑鼠按壓狀態。由目標元素上的 mousedown touchstart 觸發，並由視窗上的 mouseup mouseleave touchend touchcancel 釋放。

範例

原始碼

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>

類型宣告

顯示類型宣告

typescript

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
}
/**
 * Reactive mouse pressing state.
 *
 * @see https://vueuse.dev.org.tw/useMousePressed
 * @param options
 */
export declare function useMousePressed(options?: MousePressedOptions): {
  pressed: ShallowRef<boolean, boolean>
  sourceType: ShallowRef<UseMouseSourceType, UseMouseSourceType>
}
export type UseMousePressedReturn = ReturnType<typeof useMousePressed>