Skip to content

v-clickOutside

Function Introduction

Event when clicking outside the element triggers

Example

Click outside the box to show/hide

Show/hide

Usage

typescript
<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(true)
const handleClickOutside = () => visible.value = !visible.value
</script>

<template>
  <strong>Click outside the box to show/hide</strong>
  <div v-show="visible" v-clickOutside="handleClickOutside">Show/hide</div>
</template>

Released under the MIT License.