Package Exports

@mahdikhashan/vue3-click-outside
@mahdikhashan/vue3-click-outside/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mahdikhashan/vue3-click-outside) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue3-click-outside

npm (tag) npm bundle size npm npm peer dependency version GitHub commit activity NPM

Directive for Vue 3 to run a method on clicking outside of the binded element

Demo

Installation

npm install --save @mahdikhashan/vue3-click-outside

How to use

add the custom directive to you component

<template>
  <main>
    <div v-click-out-side="customMethod" @click="clickInside" class="box">
      BOX
    </div>
    <br />
    <p>Outside of the box</p>
  </main>
</template>

<script>
import clickOutSide from "@mahdikhashan/vue3-click-outside";

export default {
  name: "Box",
  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>

Contributing

If you want to contribute to this project simply fork it and clone it then run npm i in the root of the project, then run npm run start to run development server.

Licence and cast

MIT Licence

by Mahdi Khashan