![\"\"/](\"https://avatars2.githubusercontent.com/u/2615733?v=4\")
Ciro DE CARO
💻 👀
![\"\"/](\"https://avatars1.githubusercontent.com/u/60604839?v=4\")
Denis Konchekov
💻
Click away
',\n methods: {\n away: function() {\n console.log('clicked away');\n },\n },\n};\n```\n\nIf mixin does not suit your needs, you can use the directive directly:\n\n``` js\nimport { directive as onClickaway } from 'vue-clickaway2';\n\nexport default {\n directives: {\n onClickaway: onClickaway,\n },\n template: 'Click away
',\n methods: {\n away: function() {\n console.log('clicked away');\n },\n },\n};\n```\n\nYou can pass an argument conataining any [HTML DOM Event](https://www.w3schools.com/jsref/dom_obj_event.asp) on the directive in the markup:\n\n``` html\nClick away
\n\n```\n\n## Caveats\n\n1. Pay attention to the letter case. `onClickaway` turns into `v-on-clickaway`,\n while `onClickAway` turns into `v-on-click-away`.\n2. Prior to `vue@^2.0`, directive were able to accept statements.\n This is no longer the case. If you need to pass arguments, just do\n `v-on-clickaway=\"() => away(arg1)\"`.\n3. There is a common issue with dropdowns (and modals) inside an element with\n `v-on-clickaway`. Some UI libraries chose to implement these UI elements\n by attaching the DOM element directly to the body. This makes clicks on\n a dropped element trigger away handler. To combat that, you have to add\n an extra check in the handler, for where the event originated from.\n See #9 for an example.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\nCiro DE CARO 💻 👀 | \n Denis Konchekov 💻 | \n