feat(useElementHover): add options to the directive (#3897)

userquin · antfu · web-flow · commit cf439ddfe6a1 · 2024-07-17T13:39:56.000Z
Co-authored-by: Anthony Fu &lt;anthonyfu117@hotmail.com&gt;
diff --git a/packages/core/useElementHover/demo.vue b/packages/core/useElementHover/demo.vue
@@ -1,13 +1,21 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useElementHover } from '@vueuse/core'
+import { vElementHover } from './directive'
 
 const el = ref<HTMLButtonElement>()
+const isDirectiveHovered = ref(false)
 const isHovered = useElementHover(el, { delayEnter: 200, delayLeave: 600 })
+function onHover(hovered: boolean) {
+  isDirectiveHovered.value = hovered
+}
 </script>
 
 <template>
   <button ref="el">
     <span>{{ isHovered ? 'Thank you!' : 'Hover me' }}</span>
   </button>
+  <button v-element-hover="[onHover, { delayEnter: 200, delayLeave: 600 }]">
+    <span>{{ isDirectiveHovered ? 'Thank you!' : 'Hover me' }}</span>
+  </button>
 </template>
diff --git a/packages/core/useElementHover/directive.ts b/packages/core/useElementHover/directive.ts
@@ -1,18 +1,25 @@
 import { watch } from 'vue-demi'
 import { directiveHooks } from '@vueuse/shared'
 import type { ObjectDirective } from 'vue-demi'
+import type { UseElementHoverOptions } from '.'
 import { useElementHover } from '.'
 
 type BindingValueFunction = (state: boolean) => void
 
 export const vElementHover: ObjectDirective<
   HTMLElement,
-  BindingValueFunction
+  BindingValueFunction | [handler: BindingValueFunction, options: UseElementHoverOptions]
 > = {
   [directiveHooks.mounted](el, binding) {
-    if (typeof binding.value === 'function') {
+    const value = binding.value
+    if (typeof value === 'function') {
       const isHovered = useElementHover(el)
-      watch(isHovered, v => binding.value(v))
+      watch(isHovered, v => value(v))
+    }
+    else {
+      const [handler, options] = value
+      const isHovered = useElementHover(el, options)
+      watch(isHovered, v => handler(v))
     }
   },
 }
diff --git a/packages/core/useElementHover/index.md b/packages/core/useElementHover/index.md
@@ -42,3 +42,23 @@ function onHover(state: boolean) {
   </button>
 </template>
 ```
+
+You can also provide hover options:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { vElementHover } from '@vueuse/components'
+
+const isHovered = ref(false)
+function onHover(hovered: boolean) {
+  isHovered.value = hovered
+}
+</script>
+
+<template>
+  <button v-element-hover="[onHover, { delayEnter: 1000 }]">
+    <span>{{ isHovered ? 'Thank you!' : 'Hover me' }}</span>
+  </button>
+</template>
+```
