useEventListener

介绍

方便地进行事件绑定,在组件 mountedactivated 时绑定事件,unmounteddeactivated 时解绑事件。

代码演示

基本用法

  1. import { ref } from 'vue';
  2. import { useEventListener } from '@vant/use';
  3. export default {
  4. setup() {
  5. // 在 window 上绑定 resize 事件
  6. // 未指定监听对象时,默认会监听 window 的事件
  7. useEventListener('resize', () => {
  8. console.log('window resize');
  9. });
  10. // 在 body 元素上绑定 click 事件
  11. useEventListener(
  12. 'click',
  13. () => {
  14. console.log('click body');
  15. },
  16. { target: document.body }
  17. );
  18. },
  19. };

类型定义

  1. type Options = {
  2. target?: EventTarget | Ref<EventTarget>;
  3. capture?: boolean;
  4. passive?: boolean;
  5. };
  6. function useEventListener(
  7. type: string,
  8. listener: EventListener,
  9. options?: Options
  10. ): void;

API

参数

参数说明类型默认值
type监听的事件类型string-
listener点击外部时触发的回调函数EventListener-
options可选的配置项Options-

Options

参数说明类型默认值
target绑定事件的元素EventTarget | Ref<EventTarget>window
capture是否在事件捕获阶段触发booleanfalse
passive设置为 true 时,表示 listener 永远不会调用 preventDefaultbooleanfalse

useEventListener - 图1