From 53ba3ba95ac4e602b198d39a56e6e8736961b4e5 Mon Sep 17 00:00:00 2001
From: webfansplz <308241863@qq.com>
Date: Tue, 3 May 2022 00:13:24 +0800
Subject: [PATCH] fix(onLongPress): make directive work normal (#1550)

---
 packages/core/onLongPress/directive.test.ts | 27 ++++++++++++---------
 packages/core/onLongPress/directive.ts      | 18 ++++++++------
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/packages/core/onLongPress/directive.test.ts b/packages/core/onLongPress/directive.test.ts
index b7b42c0841a..70f8110df1d 100644
--- a/packages/core/onLongPress/directive.test.ts
+++ b/packages/core/onLongPress/directive.test.ts
@@ -1,4 +1,5 @@
-import { defineComponent } from 'vue-demi'
+import { defineComponent, isVue3 } from 'vue-demi'
+
 import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
 import { promiseTimeout } from '@vueuse/shared'
@@ -49,10 +50,12 @@ describe('vOnLongPress', () => {
     })
 
     it('should trigger longpress after 500ms', async() => {
-      const element = wrapper.get('[data-test=element]')
-      await element.trigger('pointerdown')
-      await promiseTimeout(500)
-      expect(onLongPress).toHaveBeenCalledTimes(1)
+      if (isVue3) {
+        const element = wrapper.get('[data-test=element]')
+        await element.trigger('pointerdown')
+        await promiseTimeout(500)
+        expect(onLongPress).toHaveBeenCalledTimes(1)
+      }
     })
   })
 
@@ -80,12 +83,14 @@ describe('vOnLongPress', () => {
     })
 
     it('should trigger longpress after 500ms', async() => {
-      const element = wrapper.get('[data-test=element]')
-      await element.trigger('pointerdown')
-      await promiseTimeout(500)
-      expect(onLongPress).toHaveBeenCalledTimes(0)
-      await promiseTimeout(500)
-      expect(onLongPress).toHaveBeenCalledTimes(1)
+      if (isVue3) {
+        const element = wrapper.get('[data-test=element]')
+        await element.trigger('pointerdown')
+        await promiseTimeout(500)
+        expect(onLongPress).toHaveBeenCalledTimes(0)
+        await promiseTimeout(500)
+        expect(onLongPress).toHaveBeenCalledTimes(1)
+      }
     })
   })
 })
diff --git a/packages/core/onLongPress/directive.ts b/packages/core/onLongPress/directive.ts
index 8e1b1e8a456..f660f65d410 100644
--- a/packages/core/onLongPress/directive.ts
+++ b/packages/core/onLongPress/directive.ts
@@ -1,4 +1,6 @@
-import type { FunctionDirective } from 'vue-demi'
+import type { ObjectDirective } from 'vue-demi'
+import { directiveHooks } from '@vueuse/shared'
+
 import type { OnLongPressOptions } from '.'
 import { onLongPress } from '.'
 
@@ -9,14 +11,16 @@ type BindingValueArray = [
   OnLongPressOptions,
 ]
 
-export const vOnLongPress: FunctionDirective<
+export const vOnLongPress: ObjectDirective<
 HTMLElement,
 BindingValueFunction | BindingValueArray
-> = (el, binding) => {
-  if (typeof binding.value === 'function')
-    onLongPress(el, binding.value)
-  else
-    onLongPress(el, ...binding.value)
+> = {
+  [directiveHooks.mounted](el, binding) {
+    if (typeof binding.value === 'function')
+      onLongPress(el, binding.value)
+    else
+      onLongPress(el, ...binding.value)
+  },
 }
 
 // alias