useMousePressed

响应式鼠标按下状态。由目标元素的 mousedown touchstart 事件触发，并由window上的 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()

import { useMousePressed } from '@vueuse/core'

const { pressed } = useMousePressed()

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

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

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

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

html

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

<script>
import { ref } from 'vue'
import { useMousePressed } from '@vueuse/core'

export default {
  setup() {
    const el = ref(null)

    const { pressed } = useMousePressed({ target: el })

    return {
      el,
      pressed,
    }
  }
}
</script>

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

<script>
import { ref } from 'vue'
import { useMousePressed } from '@vueuse/core'

export default {
  setup() {
    const el = ref(null)

    const { pressed } = useMousePressed({ target: el })

    return {
      el,
      pressed,
    }
  }
}
</script>

Component Usage

该函数还通过@vueuse/components提供了一个无渲染的组件版本。了解更多.

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

html

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

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

Type Declarations

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
  /**
   * Initial values
   *
   * @default false
   */
  initialValue?: boolean
  /**
   * Element target to be capture the click
   */
  target?: MaybeElementRef
}
/**
 * Reactive mouse position.
 *
 * @see https://vueuse.org/useMousePressed
 * @param options
 */
export declare function useMousePressed(options?: MousePressedOptions): {
  pressed: Ref<boolean>
  sourceType: Ref<MouseSourceType>
}
export type UseMousePressedReturn = ReturnType<typeof useMousePressed>

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
  /**
   * Initial values
   *
   * @default false
   */
  initialValue?: boolean
  /**
   * Element target to be capture the click
   */
  target?: MaybeElementRef
}
/**
 * Reactive mouse position.
 *
 * @see https://vueuse.org/useMousePressed
 * @param options
 */
export declare function useMousePressed(options?: MousePressedOptions): {
  pressed: Ref<boolean>
  sourceType: Ref<MouseSourceType>
}
export type UseMousePressedReturn = ReturnType<typeof useMousePressed>

Source

贡献者(Contributors)

日志(Changelog)

No recent changes

useMousePressed #

例子 #

Basic Usage #

Component Usage #

Type Declarations #

Source #

贡献者(Contributors) #

日志(Changelog) #