useEventListener bugfix修复

docs/useEventListener/demo/cleanup.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>useEventListener</div>
+</template>
+
+<script setup>
+  import { useEventListener } from 'zhongjiayao_v3_hooks';
+
+  const cleanup = useEventListener('resize', () => {
+    console.log('window resize cleanup');
+  });
+
+  cleanup();
+</script>

docs/useEventListener/demo/index.vue

@@ -4,14 +4,18 @@
 
 <script setup>
   import { useEventListener } from 'zhongjiayao_v3_hooks';
-  console.log('🚀 ~ useEventListener:', useEventListener);
 
   // 在 window 上绑定 resize 事件
   // 未指定监听对象时，默认会监听 window 的事件
+  useEventListener('resize', () => {
+    console.log('window resize');
+  });
+
+  // 在 body 元素上绑定 click 事件
   useEventListener(
     'click',
     () => {
-      console.log('window 111');
+      console.log('click body');
     },
     { target: document.body },
   );

docs/useEventListener/index.md

@@ -1,3 +1,29 @@
 # useEventListener
 
-<preview path="./demo/index.vue" title="基本使用"  ></preview>
+方便地进行事件绑定，在组件 mounted 和 activated 时绑定事件，unmounted 和 deactivated 时解绑事件。
+
+## 基本用法
+
+<preview path="./demo/index.vue" title="基本使用"></preview>
+
+## 取消事件监听
+
+<preview path="./demo/cleanup.vue" title="基本使用"></preview>
+
+## API
+
+### 参数
+
+| 参数     | 说明           | 类型            | 默认值 |
+| -------- | -------------- | --------------- | ------ |
+| type     | 监听的事件类型 | _string_        | -      |
+| listener | 事件回调函数   | _EventListener_ | -      |
+| options  | 可选的配置项   | _Options_       | -      |
+
+### Options
+
+| 参数    | 说明                                                            | 类型                               | 默认值   |
+| ------- | --------------------------------------------------------------- | ---------------------------------- | -------- |
+| target  | 绑定事件的元素                                                  | _EventTarget \| Ref\<EventTarget>_ | `window` |
+| capture | 是否在事件捕获阶段触发                                          | _boolean_                          | `false`  |
+| passive | 设置为 `true` 时，表示 `listener` 永远不会调用 `preventDefault` | _boolean_                          | `false`  |

packages/hooks/src/useEventListener/demo/cleanup.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>useEventListener</div>
+</template>
+
+<script setup>
+  import { useEventListener } from 'zhongjiayao_v3_hooks';
+
+  const cleanup = useEventListener('resize', () => {
+    console.log('window resize cleanup');
+  });
+
+  cleanup();
+</script>

packages/hooks/src/useEventListener/demo/index.vue

@@ -4,14 +4,18 @@
 
 <script setup>
   import { useEventListener } from 'zhongjiayao_v3_hooks';
-  console.log('🚀 ~ useEventListener:', useEventListener);
 
   // 在 window 上绑定 resize 事件
   // 未指定监听对象时，默认会监听 window 的事件
+  useEventListener('resize', () => {
+    console.log('window resize');
+  });
+
+  // 在 body 元素上绑定 click 事件
   useEventListener(
     'click',
     () => {
-      console.log('window 111');
+      console.log('click body');
     },
     { target: document.body },
   );

packages/hooks/src/useEventListener/index.md

@@ -1,3 +1,29 @@
 # useEventListener
 
-<preview path="./demo/index.vue" title="基本使用"  ></preview>
+方便地进行事件绑定，在组件 mounted 和 activated 时绑定事件，unmounted 和 deactivated 时解绑事件。
+
+## 基本用法
+
+<preview path="./demo/index.vue" title="基本使用"></preview>
+
+## 取消事件监听
+
+<preview path="./demo/cleanup.vue" title="基本使用"></preview>
+
+## API
+
+### 参数
+
+| 参数     | 说明           | 类型            | 默认值 |
+| -------- | -------------- | --------------- | ------ |
+| type     | 监听的事件类型 | _string_        | -      |
+| listener | 事件回调函数   | _EventListener_ | -      |
+| options  | 可选的配置项   | _Options_       | -      |
+
+### Options
+
+| 参数    | 说明                                                            | 类型                               | 默认值   |
+| ------- | --------------------------------------------------------------- | ---------------------------------- | -------- |
+| target  | 绑定事件的元素                                                  | _EventTarget \| Ref\<EventTarget>_ | `window` |
+| capture | 是否在事件捕获阶段触发                                          | _boolean_                          | `false`  |
+| passive | 设置为 `true` 时，表示 `listener` 永远不会调用 `preventDefault` | _boolean_                          | `false`  |

packages/hooks/src/useEventListener/index.ts

@@ -47,7 +47,6 @@ function useEventListener(type: string, listener: EventListener, options?: UseEv
 
     // 如果元素存在且尚未附加监听器，则进行添加
     if (element && !attached) {
-      console.log('434343');
       element.addEventListener(type, listener, {
         capture,
         passive,
@@ -70,6 +69,7 @@ function useEventListener(type: string, listener: EventListener, options?: UseEv
 
   onUnmounted(() => remove(target));
   onDeactivated(() => remove(target));
+  onMountedOrActivated(() => add(target));
 
   let stopWatch: WatchStopHandle;