Vant4 useClickAway

介绍

监听点击元素外部的事件。

代码演示

基本用法

<div ref="root" />

import { ref } from "vue";
import { useClickAway } from "@vant/use";

export default {
  setup() {
    const root = ref();
    useClickAway(root, () => {
      console.log("click outside!");
    });

    return { root };
  },
};

自定义事件

通过 ​eventName​ 选项可以自定义需要监听的事件类型。

<div ref="root" />

import { ref } from "vue";
import { useClickAway } from "@vant/use";

export default {
  setup() {
    const root = ref();
    useClickAway(
      root,
      () => {
        console.log("touch outside!");
      },
      { eventName: "touchstart" }
    );

    return { root };
  },
};

API

类型定义

type Options = {
  eventName?: string;
};

function useClickAway(
  target: Element | Ref<Element | undefined>,
  listener: EventListener,
  options?: Options
): void;

参数

Options