{"id":13424209,"url":"https://github.com/simplesmiler/vue-clickaway","last_synced_at":"2025-04-09T11:03:02.258Z","repository":{"id":57684457,"uuid":"42391700","full_name":"simplesmiler/vue-clickaway","owner":"simplesmiler","description":"Reusable clickaway directive for reusable Vue.js components","archived":false,"fork":false,"pushed_at":"2024-06-30T11:23:41.000Z","size":72,"stargazers_count":960,"open_issues_count":28,"forks_count":77,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-02T09:15:21.393Z","etag":null,"topics":["vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simplesmiler.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-09-13T10:21:30.000Z","updated_at":"2025-04-01T21:55:22.000Z","dependencies_parsed_at":"2024-01-29T09:19:27.591Z","dependency_job_id":"6d84c0a5-02e9-4b03-90fe-1a82844ae2bd","html_url":"https://github.com/simplesmiler/vue-clickaway","commit_stats":{"total_commits":57,"total_committers":4,"mean_commits":14.25,"dds":"0.052631578947368474","last_synced_commit":"21f658729efe5060a19049a30d28b44cac99b402"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplesmiler%2Fvue-clickaway","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplesmiler%2Fvue-clickaway/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplesmiler%2Fvue-clickaway/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplesmiler%2Fvue-clickaway/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simplesmiler","download_url":"https://codeload.github.com/simplesmiler/vue-clickaway/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248027400,"owners_count":21035594,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vue"],"created_at":"2024-07-31T00:00:50.196Z","updated_at":"2025-04-09T11:03:02.230Z","avatar_url":"https://github.com/simplesmiler.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","JavaScript","UI实用程序","Components \u0026 Libraries","UI Utilities","Awesome Vue.js","UI Utilities [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","事件处理","UI Utilities","Event Handling"],"readme":"# vue-clickaway\n\n\u003e Reusable clickaway directive for reusable [Vue.js](https://github.com/vuejs/vue) components\n\n[![npm version](https://img.shields.io/npm/v/vue-clickaway.svg)](https://www.npmjs.com/package/vue-clickaway)\n[![CDNJS](https://img.shields.io/cdnjs/v/vue-clickaway.svg)](https://cdnjs.com/libraries/vue-clickaway)\n\n## Overview\n\nSometimes you need to detect clicks **outside** of the element (to close a modal\nwindow or hide a dropdown select). There is no native event for that, and Vue.js\ndoes not cover you either. This is why `vue-clickaway` exists. Please check out\nthe [demo](https://jsfiddle.net/simplesmiler/4w1cs8u3/150/) before reading further.\n\n## Requirements\n\n- vue: ^2.0.0\n\nIf you need a version for Vue 1, try `vue-clickaway@1.0`.\n\n## Install\n\nFrom npm:\n\n``` sh\n$ npm install vue-clickaway --save\n```\n\nFrom CDN, chose the one you prefer:\n\n``` html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-clickaway@2.2.2/dist/vue-clickaway.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/vue-clickaway/2.2.2/vue-clickaway.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.rawgit.com/simplesmiler/vue-clickaway/2.2.2/dist/vue-clickaway.min.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n1. Make the directive available to your component\n2. Define a method to be called\n3. Use the directive in the template\n\nThe recommended way is to use the mixin:\n\n``` js\nimport { mixin as clickaway } from 'vue-clickaway';\n\nexport default {\n  mixins: [ clickaway ],\n  template: '\u003cp v-on-clickaway=\"away\"\u003eClick away\u003c/p\u003e',\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-clickaway';\n\nexport default {\n  directives: {\n    onClickaway: onClickaway,\n  },\n  template: '\u003cp v-on-clickaway=\"away\"\u003eClick away\u003c/p\u003e',\n  methods: {\n    away: function() {\n      console.log('clicked away');\n    },\n  },\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=\"() =\u003e 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## License\n\n[MIT](https://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplesmiler%2Fvue-clickaway","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimplesmiler%2Fvue-clickaway","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplesmiler%2Fvue-clickaway/lists"}