Vant3 useEventListener

介绍

方便地进行事件绑定,在组件 mounted 和 activated 时绑定事件,unmounted 和 deactivated 时解绑事件。

代码演示

基本用法

import { ref } from vue;
import { useEventListener } from @vant/use;

export default {
  setup() {
    // 在 window 上绑定 resize 事件
    // 未指定监听对象时,默认会监听 window 的事件
    useEventListener(resize, () => {
      console.log(window resize);
    });

    // 在 body 元素上绑定 click 事件
    useEventListener(
      click,
      () => {
        console.log(click body);
      },
      { target: document.body }
    );
  },
};

类型定义

type Options = {
  target?: EventTarget | Ref<EventTarget>;
  capture?: boolean;
  passive?: boolean;
};

function useEventListener(
  type: string,
  listener: EventListener,
  options?: Options
): void;

API

参数

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

Options

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

作者:冒牌SEO,如若转载,请注明出处:https://www.web176.com/vant3/18668.html

(0)
打赏 支付宝 支付宝 微信 微信
冒牌SEO冒牌SEO
上一篇 2023年4月28日
下一篇 2023年4月28日

相关推荐

发表回复

登录后才能评论