fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
2.5 KiB
2.5 KiB
category
| category |
|---|
| Sensors |
useMousePressed
Reactive mouse pressing state. Triggered by mousedown touchstart on target element and released by mouseup mouseleave touchend touchcancel on window.
Basic Usage
import { useMousePressed } from '@vueuse/core';
const { pressed } = useMousePressed();
Touching is enabled by default. To make it only detects mouse changes, set touch to false
import { useMousePressed } from '@vueuse/core';
// ---cut---
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.
<script setup 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">Only clicking on this element will trigger the update.</div>
</template>
Component Usage
<template>
<UseMousePressed v-slot="{ pressed }"> Is Pressed: {{ pressed }} </UseMousePressed>
</template>
Type Declarations
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://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.org/useMousePressed
* @param options
*/
export declare function useMousePressed(options?: MousePressedOptions): {
pressed: ShallowRef<boolean, boolean>;
sourceType: ShallowRef<UseMouseSourceType, UseMouseSourceType>;
};
export type UseMousePressedReturn = ReturnType<typeof useMousePressed>;