VueUse 中的 Longpress 是什么？

VueUse 是一个非常实用的 Vue 组合式函数库，而 Longpress 就是其中一个很有意思的功能，Longpress 即长按，在很多应用场景中都很常见，比如长按删除某个列表项、长按触发某个特殊操作等。

VueUse Longpress 怎么用？

你需要安装 VueUse，在你的 Vue 项目中，通过包管理器（如 npm 或 yarn）进行安装。

安装好之后,在你的 Vue 组件中引入 useLongpress 函数。

比如在一个简单的按钮组件中使用：

<template>
  <button ref="buttonRef">长按我</button>
</template>
<script setup>
import { ref } from 'vue';
import { useLongpress } from '@vueuse/core';
const buttonRef = ref(null);
const { isPressed } = useLongpress(buttonRef, () => {
  console.log('长按触发了');
});
</script>

本段代码来自 https://www.codeqd.com/post/20250520518.html

<template> <button ref="buttonRef">长按我</button> </template> <script setup> import { ref } from 'vue'; import { useLongpress } from '@vueuse/core'; const buttonRef = ref(null); const { isPressed } = useLongpress(buttonRef, () => { console.log('长按触发了'); }); </script>

这里通过 ref 获取按钮的引用，然后将其传递给 useLongpress 函数，第二个参数是长按触发的回调函数，当用户长按按钮时，就会执行这个回调函数。

VueUse Longpress 有哪些配置选项？

VueUse 的 Longpress 提供了一些配置选项来满足不同的需求。

延迟时间（delay）

默认情况下,长按的延迟时间可能不太符合你的项目需求，你可以通过 delay 选项来设置长按触发的延迟时间（单位为毫秒）。

<template>
  <button ref="buttonRef">长按我（延迟 1000 毫秒）</button>
</template>
<script setup>
import { ref } from 'vue';
import { useLongpress } from '@vueuse/core';
const buttonRef = ref(null);
const { isPressed } = useLongpress(buttonRef, () => {
  console.log('长按触发了');
}, { delay: 1000 });
</script>

本段代码来自 https://www.codeqd.com/post/20250520518.html

<template> <button ref="buttonRef">长按我（延迟 1000 毫秒）</button> </template> <script setup> import { ref } from 'vue'; import { useLongpress } from '@vueuse/core'; const buttonRef = ref(null); const { isPressed } = useLongpress(buttonRef, () => { console.log('长按触发了'); }, { delay: 1000 }); </script>

这样,用户需要长按按钮至少 1000 毫秒才会触发回调。

监听事件（event）

Longpress 默认监听的是 mousedown 和 touchstart 事件，但在某些特殊场景下，你可能需要监听其他事件，比如在移动端，有时候你可能希望结合其他触摸事件来更精准地控制长按触发。

你可以通过 event 选项来指定监听的事件。

<template>
  <div ref="divRef">长按这个 div（自定义事件）</div>
</template>
<script setup>
import { ref } from 'vue';
import { useLongpress } from '@vueuse/core';
const divRef = ref(null);
const { isPressed } = useLongpress(divRef, () => {
  console.log('长按触发了');
}, { event: ['touchstart', 'touchmove'] });
</script>

本段代码来自 https://www.codeqd.com/post/20250520518.html

<template> <div ref="divRef">长按这个 div（自定义事件）</div> </template> <script setup> import { ref } from 'vue'; import { useLongpress } from '@vueuse/core'; const divRef = ref(null); const { isPressed } = useLongpress(divRef, () => { console.log('长按触发了'); }, { event: ['touchstart', 'touchmove'] }); </script>

这里我们将监听事件设置为 touchstart 和 touchmove，这样在移动端触摸这个 div 并移动时，只要满足长按条件（结合延迟时间等）就会触发回调。

VueUse Longpress 在实际项目中的应用场景有哪些？

列表项操作

在一个商品列表中,每个商品项可能有长按删除的功能。

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index" ref="itemRefs[index]">
      {{ item.name }}
    </li>
  </ul>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useLongpress } from '@vueuse/core';
const items = reactive([{ name: '商品 1' }, { name: '商品 2' }]);
const itemRefs = ref([]);
for (let i = 0; i < items.length; i++) {
  const { isPressed } = useLongpress(itemRefs.value[i], () => {
    items.splice(i, 1);
  });
}
</script>

本段代码来自 https://www.codeqd.com/post/20250520518.html

<template> <ul> <li v-for="(item, index) in items" :key="index" ref="itemRefs[index]"> {{ item.name }} </li> </ul> </template> <script setup> import { ref, reactive } from 'vue'; import { useLongpress } from '@vueuse/core'; const items = reactive([{ name: '商品 1' }, { name: '商品 2' }]); const itemRefs = ref([]); for (let i = 0; i < items.length; i++) { const { isPressed } = useLongpress(itemRefs.value[i], () => { items.splice(i, 1); }); } </script>

当用户长按某个商品项时,就会将其从列表中删除。

快捷操作触发

比如在一个笔记应用中,长按某个笔记区域可以快速弹出编辑菜单。

<template>
  <div ref="noteRef">
    这是一段笔记内容
    <div v-if="showMenu" class="menu">编辑菜单</div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { useLongpress } from '@vueuse/core';
const noteRef = ref(null);
const showMenu = ref(false);
const { isPressed } = useLongpress(noteRef, () => {
  showMenu.value = true;
});
</script>

本段代码来自 https://www.codeqd.com/post/20250520518.html

<template> <div ref="noteRef"> 这是一段笔记内容 <div v-if="showMenu" class="menu">编辑菜单</div> </div> </template> <script setup> import { ref } from 'vue'; import { useLongpress } from '@vueuse/core'; const noteRef = ref(null); const showMenu = ref(false); const { isPressed } = useLongpress(noteRef, () => { showMenu.value = true; }); </script>

当长按笔记区域时,就会显示编辑菜单，方便用户进行快捷操作。

VueUse 的 Longpress 功能为我们在 Vue 项目中实现长按交互提供了便捷的方式，通过简单的配置和使用，我们可以轻松实现各种长按触发的操作，无论是列表项的删除、快捷菜单的弹出还是其他自定义的长按交互，它的灵活性和易用性使得我们能够根据项目的具体需求进行个性化的设置，提升用户体验，在实际项目开发中，合理运用 VueUse Longpress 可以让我们的应用更加丰富和实用。