fix(onLongPress): make directive work normal (#1550)

vueuse · May 2, 2022 · 53ba3ba · 53ba3ba
1 parent ec3383c
commit 53ba3ba
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 18 deletions.
diff --git 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
@@ -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