
Security News
MCP Community Begins Work on Official MCP Metaregistry
The MCP community is launching an official registry to standardize AI tool discovery and let agents dynamically find and install MCP servers.
vue-clickaway2
Advanced tools
Reusable clickaway directive for reusable Vue.js components
Sometimes you need to detect clicks outside of the element (to close a modal
window or hide a dropdown select). There is no native event for that, and Vue.js
does not cover you either. This is why vue-clickaway2
exists. Please check out
the demo before reading further.
Vue-Clickaway2 is a continuation of Vue-Cickaway.
If you need a version for Vue 1, try vue-clickaway@1.0
.
From npm:
$ npm install vue-clickaway2 --save
The recommended way is to use the mixin:
import { mixin as clickaway } from 'vue-clickaway2';
export default {
mixins: [ clickaway ],
template: '<p v-on-clickaway="away">Click away</p>',
methods: {
away: function() {
console.log('clicked away');
},
},
};
If mixin does not suit your needs, you can use the directive directly:
import { directive as onClickaway } from 'vue-clickaway2';
export default {
directives: {
onClickaway: onClickaway,
},
template: '<p v-on-clickaway="away">Click away</p>',
methods: {
away: function() {
console.log('clicked away');
},
},
};
You can pass an argument conataining any HTML DOM Event on the directive in the markup:
<p v-on-clickaway:mousedown="away">Click away</p>
<!-- If you don't pass an argument it'll default to click just like previous versions -->
onClickaway
turns into v-on-clickaway
,
while onClickAway
turns into v-on-click-away
.vue@^2.0
, directive were able to accept statements.
This is no longer the case. If you need to pass arguments, just do
v-on-clickaway="() => away(arg1)"
.v-on-clickaway
. Some UI libraries chose to implement these UI elements
by attaching the DOM element directly to the body. This makes clicks on
a dropped element trigger away handler. To combat that, you have to add
an extra check in the handler, for where the event originated from.
See #9 for an example.Thanks goes to these wonderful people (emoji key):
Ciro DE CARO 💻 👀 | Denis Konchekov 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
Reusable clickaway directive for reusable Vue.js components
The npm package vue-clickaway2 receives a total of 4,181 weekly downloads. As such, vue-clickaway2 popularity was classified as popular.
We found that vue-clickaway2 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The MCP community is launching an official registry to standardize AI tool discovery and let agents dynamically find and install MCP servers.
Research
Security News
Socket uncovers an npm Trojan stealing crypto wallets and BullX credentials via obfuscated code and Telegram exfiltration.
Research
Security News
Malicious npm packages posing as developer tools target macOS Cursor IDE users, stealing credentials and modifying files to gain persistent backdoor access.