跳到主要内容

useMousePressed

分类
导出大小
837 B
上次更改
上个月

响应式鼠标按下状态。在目标元素上通过 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 })

要仅捕获特定元素上的 mousedowntouchstart 事件,可以通过传入元素的 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
>

来源

源码演示文档

贡献者

Anthony Fu
IlyaL
wheat
IlyaL
丶远方
NoiseFan
SerKo
Robin
Fernando Fernández
Robin
Anthony Fu
Meet you
Chris-Robin Ennen
Jonas Schade
RAX7
ByMykel
vaakian X
MinatoHikari
Marshall Thompson
Shinigami
Alex Kozack

更新日志

8c521 - feat(components)!: 重构组件并使其保持一致 (#4912)
v12.4.0
dd316 - feat: 尽可能在所有地方使用被动事件处理程序 (#4477)
v12.3.0
a123a - feat: 添加 onPressedonReleased 作为选项 (#4425)
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
v10.7.0
17f97 - fix: 将元素参数的类型更改为 MaybeComputedElementRef (#3566)
v10.5.0
d5c81 - feat: 添加 capture 选项 (#3392)
v10.1.0
4bb5b - feat(useMouse): 支持自定义事件提取器 (#2991)

根据 MIT 许可证发布。