Vant3 useClickAway

介紹

監(jiān)聽(tīng)點(diǎn)擊元素外部的事件。

代碼演示

基本用法

<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 };
  },
};

自定義事件

通過(guò) eventName 選項(xiàng)可以自定義需要監(jiān)聽(tīng)的事件類型。

<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;

參數(shù)

Options