/*! For license information please see 4973.0edf5479.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["4973"],{12818:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

useClickAway

Intro

Triggers a callback when user clicks outside of the target element.

Usage

Basic Usage

<div ref="root" />\n

import { ref } from 'vue';\nimport { useClickAway } from '@vant/use';\n\nexport default {\n  setup() {\n    const root = ref();\n    useClickAway(root, () => {\n      console.log('click outside!');\n    });\n\n    return { root };\n  },\n};\n

Custom Event

<div ref="root" />\n

import { ref } from 'vue';\nimport { useClickAway } from '@vant/use';\n\nexport default {\n  setup() {\n    const root = ref();\n    useClickAway(\n      root,\n      () => {\n        console.log('touch outside!');\n      },\n      { eventName: 'touchstart' },\n    );\n\n    return { root };\n  },\n};\n

API

Type Declarations

type Options = {\n  eventName?: string;\n};\n\nfunction useClickAway(\n  target:\n    | Element\n    | Ref<Element | undefined>\n    | Array<Element | Ref<Element | undefined>>,\n  listener: EventListener,\n  options?: Options,\n): void;\n

Params

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Name	Description	Type	Default Value
target	Target element, support multiple elements	Element \| Ref<Element> \| Array<Element \| Ref<Element>>	-
listener	Callback function when the outside is clicked	EventListener	-
options	Options	Options	`{ eventName: \'click\' }`

Options

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Name	Description	Type	Default Value
eventName	Event name	string	`click`

'},null,8,e))}}}]);