v-longpress 指令

介绍

v-longpress 指令用于实现长按事件功能。当用户按住元素达到指定时间后，会触发相应的回调函数。

基础用法

传入event参数，当用户长按元素达到指定时间（默认时间为 2 秒）后，会触发回调函数：

查看代码

<template>
  <div class="container">
    <a-button type="primary" shape="round" long size="large" v-longpress="{ event: handleLongPress }"
      >按住我2秒</a-button
    >
  </div>
</template>

<script setup lang="ts">
import { Notification } from '@arco-design/web-vue'
const handleLongPress = () => {
  Notification.success('你长按了按钮2秒')
}
</script>

<style scoped>
.container {
  padding: 1rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  margin: 1rem 0;
}
</style>

自定义延时

v-longpress指令支持自定义延时时长，通过传入参数delay即可实现。delay 作为一个可选项，当你传入delay参数时，会覆盖默认的 2 秒长按时间：

设置 1 秒长按时间：

查看代码

<template>
  <div class="container">
    <a-button type="primary" shape="round" long size="large" v-longpress="{ event: handleLongPress, delay: 1000 }"
      >按住我1秒</a-button
    >
  </div>
</template>

<script setup lang="ts">
import { Notification } from '@arco-design/web-vue'
const handleLongPress = () => {
  Notification.success('你长按了按钮1秒')
}
</script>

<style scoped>
.container {
  padding: 1rem;
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  margin: 1rem 0;
}
</style>

API

属性名	说明	类型	是否必选	默认值
event	长按触发的回调函数	Function	✓	-
delay	长按触发时间（毫秒）	number	○	2000

注意事项

关于两个参数

• event 参数为必填项，必须是一个有效的函数
• delay 参数可选，必须是一个有效的数字（毫秒）