useOnOutsidePress

Execute callback when click is outside of element

Parameters

import { useOnOutsidePress } from "vue-composable"; useOnOutsidePress(element, callback); 

Parameters	Type	Required	Default	Description
element	Ref<Element>	true		Element to keep track if clicked outside
callback	(e: MouseEvent) => void	true		Callback when clicked outside

Methods

The useOnOutsidePress function exposes the following methods:

import { useOnOutsidePress } from "vue-composable"; const remove = useOnOutsidePress(); 

Signature	Description
remove	Manually removes the event listener

Example

Click Outside or inside

check the console

Code

<template> <div> <div ref="elref" style="background: red;width:100px"> Click Outside or inside </div> <p>check the console</p> </div> </template> <script> import { reactive, ref } from "@vue/composition-api"; import { useOnOutsidePress } from "vue-composable"; export default { name: "on-mouse-move-example", setup(_) { const elref = ref(null); useOnOutsidePress(elref, () => console.log("clicked outside")); return { elref }; } }; </script>