Attaching an event when the component is mounted and activated, then removing the event when the component is unmounted and deactivated.
import { ref } from 'vue';\nimport { useEventListener } from '@vant/use';\n\nexport default {\n setup() {\n // attach the resize event to window\n useEventListener('resize', () => {\n console.log('window resize');\n });\n\n // attach the click event to the body element\n useEventListener(\n 'click',\n () => {\n console.log('click body');\n },\n { target: document.body },\n );\n },\n};\nuseEventListener will return a cleanup function\uFF0Cyou can call it to remove the event listener.
import { ref } from 'vue';\nimport { useEventListener } from '@vant/use';\n\nexport default {\n setup() {\n const cleanup = useEventListener('resize', () => {\n console.log('window resize');\n });\n\n cleanup();\n },\n};\ntype Options = {\n target?: EventTarget | Ref<EventTarget>;\n capture?: boolean;\n passive?: boolean;\n};\n\nfunction useEventListener(\n type: string,\n listener: EventListener,\n options?: Options,\n): () => void;\n| Name | \nDescription | \nType | \nDefault Value | \n
|---|---|---|---|
| type | \nEvent type | \nstring | \n- | \n
| listener | \nCallback function | \nEventListener | \n- | \n
| options | \nOptions | \nOptions | \n- | \n
| Name | \nDescription | \nType | \nDefault Value | \n
|---|---|---|---|
| target | \nTarget element | \nEventTarget | Ref<EventTarget> | \nwindow | \n
| capture | \nWhether to enable capture | \nboolean | \nfalse | \n
| passive | \nif true, indicates that the listener will never call preventDefault() | \nboolean | \nfalse | \n