v-click-outside-vue3
v0.0.1
Published
Directive for Vue 3 to run a method when clicking outside the bound element, WITH TYPESCRIPT.
Downloads
9
Readme
v-click-outside-vue3
Directive for Vue 3 to run a method when clicking outside the bound element, WITH TYPESCRIPT.
Installation
npm
npm install --save v-click-outside-vue3
yarn
yarn add v-click-outside-vue3
pnpm
pnpm i v-click-outside-vue3
How to use
For a single component
Composition API
<template>
<main>
<div v-if="visible" v-click-outside="customMethod" class="box" @click="counter++">BOX {{ counter }}</div>
<br />
<p>Outside of the box</p>
</main>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { clickOutside as vClickOutside } from "v-click-outside-vue3"
const visible = ref(true)
const counter = ref(0)
function customMethod() {
visible.value = false
}
</script>
<style scoped>
div {
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
background-color: red;
width: 100px;
height: 100px;
}
p {
font-size: 2rem;
font-weight: 800;
}
</style>
Options API
<template>
<main>
<div v-click-out-side="customMethod" @click="clickInside" class="box">
BOX
</div>
<br />
<p>Outside of the box</p>
</main>
</template>
<script lang="ts">
import { clickOutside } from "v-click-outside-vue3"
export default {
directives: {
clickOutside,
},
props: {
msg: String,
},
methods: {
customMethod() {
alert("You clicked outside the box!");
},
clickInside() {
alert("You clicked inside the box!");
},
},
}
</script>
<style scoped>
div {
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
background-color: red;
width: 100px;
height: 100px;
}
p {
font-size: 2rem;
font-weight: 800;
}
</style>
For the entire app
In your main.ts
:
import { createApp } from "vue"
import "./style.css"
import { clickOutSide } from "v-click-outside-vue3"
import App from "./App.vue"
const app = createApp(App)
app.directive("click-outside", clickOutSide)
app.mount("#app")
In your components:
<template>
<main>
<div v-click-out-side="customMethod" @click="clickInside" class="box">
BOX
</div>
<br />
<p>Outside of the box</p>
</main>
</template>
<!--The rest doesn't matter, since there's no need to import anything-->
<script lang="ts">
export default {
props: {
msg: String,
},
methods: {
customMethod() {
alert("You clicked outside the box!");
},
clickInside() {
alert("You clicked inside the box!");
},
},
}
</script>
<style scoped>
div {
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
background-color: red;
width: 100px;
height: 100px;
}
p {
font-size: 2rem;
font-weight: 800;
}
</style>
Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request