useMousePressed
响应式鼠标按下状态。在目标元素上通过 mousedown
touchstart
触发,并在窗口上通过 mouseup
mouseleave
touchend
touchcancel
释放。
演示
pressed: false
sourceType: null
正在追踪
基本用法
ts
import { useMousePressed } from '@vueuse/core'
const { pressed } = useMousePressed()
默认启用触控。要使其仅检测鼠标变化,请将 touch
设置为 false
。
ts
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>
类型声明
显示类型声明
ts
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>