vant/static/js/async/3364.230c427c.js

/*! For license information please see 3364.230c427c.js.LICENSE.txt */
(self.webpackChunk=self.webpackChunk||[]).push([["3364"],{17531:function(n,s,a){"use strict";a.r(s);var t=a("80681");let e=["innerHTML"];s.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'<h1>useEventListener</h1>\n<div class="van-doc-card"><h3 id="intro" tabindex="-1">Intro</h3>\n<p>Attaching an event when the component is <code>mounted</code> and <code>activated</code>, then removing the event when the component is <code>unmounted</code> and <code>deactivated</code>.</p>\n</div><h2 id="usage" tabindex="-1">Usage</h2>\n<div class="van-doc-card"><h3 id="basic-usage" tabindex="-1">Basic Usage</h3>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>;\n<span class="hljs-keyword">import</span> { useEventListener } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@vant/use&#x27;</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n  <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n    <span class="hljs-comment">// attach the resize event to window</span>\n    <span class="hljs-title function_">useEventListener</span>(<span class="hljs-string">&#x27;resize&#x27;</span>, <span class="hljs-function">() =&gt;</span> {\n      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;window resize&#x27;</span>);\n    });\n\n    <span class="hljs-comment">// attach the click event to the body element</span>\n    <span class="hljs-title function_">useEventListener</span>(\n      <span class="hljs-string">&#x27;click&#x27;</span>,\n      <span class="hljs-function">() =&gt;</span> {\n        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;click body&#x27;</span>);\n      },\n      { <span class="hljs-attr">target</span>: <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span> },\n    );\n  },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="remove-event-listener" tabindex="-1">Remove Event Listener</h3>\n<p><code>useEventListener</code> will return a <code>cleanup</code> function\uFF0Cyou can call it to remove the event listener.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>;\n<span class="hljs-keyword">import</span> { useEventListener } <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@vant/use&#x27;</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n  <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n    <span class="hljs-keyword">const</span> cleanup = <span class="hljs-title function_">useEventListener</span>(<span class="hljs-string">&#x27;resize&#x27;</span>, <span class="hljs-function">() =&gt;</span> {\n      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;window resize&#x27;</span>);\n    });\n\n    <span class="hljs-title function_">cleanup</span>();\n  },\n};\n</code></pre>\n</div><h2 id="api" tabindex="-1">API</h2>\n<div class="van-doc-card"><h3 id="type-declarations" tabindex="-1">Type Declarations</h3>\n<pre><code class="language-ts"><span class="hljs-keyword">type</span> <span class="hljs-title class_">Options</span> = {\n  target?: <span class="hljs-title class_">EventTarget</span> | <span class="hljs-title class_">Ref</span>&lt;<span class="hljs-title class_">EventTarget</span>&gt;;\n  capture?: <span class="hljs-built_in">boolean</span>;\n  passive?: <span class="hljs-built_in">boolean</span>;\n};\n\n<span class="hljs-keyword">function</span> <span class="hljs-title function_">useEventListener</span>(<span class="hljs-params">\n  <span class="hljs-keyword">type</span>: <span class="hljs-built_in">string</span>,\n  listener: EventListener,\n  options?: Options,\n</span>): <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">void</span>;\n</code></pre>\n</div><div class="van-doc-card"><h3 id="params" tabindex="-1">Params</h3>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>type</td>\n<td>Event type</td>\n<td><em>string</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>listener</td>\n<td>Callback function</td>\n<td><em>EventListener</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>options</td>\n<td>Options</td>\n<td><em>Options</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="options" tabindex="-1">Options</h3>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>target</td>\n<td>Target element</td>\n<td><em>EventTarget | Ref&lt;EventTarget&gt;</em></td>\n<td><code>window</code></td>\n</tr>\n<tr>\n<td>capture</td>\n<td>Whether to enable capture</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>passive</td>\n<td>if true, indicates that the listener will never call <code>preventDefault()</code></td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n</tbody>\n</table>\n</div>'},null,8,e))}}}]);