{"id":13564076,"url":"https://github.com/Dafrok/v-hotkey","last_synced_at":"2025-04-03T21:30:24.701Z","repository":{"id":41867412,"uuid":"85151689","full_name":"Dafrok/v-hotkey","owner":"Dafrok","description":"Vue 2.x directive for binding hotkeys to components.","archived":false,"fork":false,"pushed_at":"2023-03-20T13:49:03.000Z","size":3571,"stargazers_count":720,"open_issues_count":16,"forks_count":75,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-30T23:02:03.447Z","etag":null,"topics":["directive","hotkey","vue"],"latest_commit_sha":null,"homepage":"https://dafrok.github.io/v-hotkey","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/Dafrok.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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}},"created_at":"2017-03-16T04:12:12.000Z","updated_at":"2025-03-23T16:03:37.000Z","dependencies_parsed_at":"2024-01-08T08:55:08.410Z","dependency_job_id":null,"html_url":"https://github.com/Dafrok/v-hotkey","commit_stats":{"total_commits":110,"total_committers":9,"mean_commits":"12.222222222222221","dds":"0.38181818181818183","last_synced_commit":"a7bb78dc8887557b7867d627c497933fe5b00859"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dafrok%2Fv-hotkey","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dafrok%2Fv-hotkey/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dafrok%2Fv-hotkey/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dafrok%2Fv-hotkey/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dafrok","download_url":"https://codeload.github.com/Dafrok/v-hotkey/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246523873,"owners_count":20791444,"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":["directive","hotkey","vue"],"created_at":"2024-08-01T13:01:26.304Z","updated_at":"2025-04-03T21:30:23.390Z","avatar_url":"https://github.com/Dafrok.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI实用程序","Components \u0026 Libraries","UI Utilities","UI Utilities [🔝](#readme)"],"sub_categories":["事件处理","UI Utilities","Event Handling"],"readme":"# v-hotkey\n\n[![bundlephobia minified size](https://badgen.net/bundlephobia/min/v-hotkey)](https://bundlephobia.com/result?p=v-hotkey)\n[![npm package version](https://badgen.net/npm/v/v-hotkey)](https://npm.im/v-hotkey)\n[![github license](https://badgen.net/github/license/dafrok/v-hotkey)](https://github.com/dafrok/v-hotkey/blob/master/LICENSE)\n[![js standard style](https://badgen.net/badge/code%20style/standard/pink)](https://standardjs.com)\n\nVue 2.x directive for binding hotkeys to components.\n\n## Play with me\n\n[https://dafrok.github.io/v-hotkey](https://dafrok.github.io/v-hotkey)\n\n## Install\n\n```bash\n$ npm i v-hotkey\n# or\n$ yarn add v-hotkey\n```\n\n## Usage\n\n```javascript\nimport Vue from 'vue'\nimport VueHotkey from 'v-hotkey'\n\nVue.use(VueHotkey)\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003cspan v-hotkey=\"keymap\" v-show=\"show\"\u003e \n    Press `ctrl + esc` to toggle me! Hold `enter` to hide me!\n  \u003c/span\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data () {\n    return {\n      show: true\n    }\n  },\n  methods: {\n    toggle () {\n      this.show = !this.show\n    },\n    show () {\n      this.show = true\n    },\n    hide () {\n      this.show = false\n    }\n  },\n  computed: {\n    keymap () {\n      return {\n        // 'esc+ctrl' is OK.\n        'ctrl+esc': this.toggle,\n        'enter': {\n          keydown: this.hide,\n          keyup: this.show\n        }\n      }\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## Event Handler\n\n- keydown (as default) \n- keyup\n\n## Key Combination\n\nUse one or more of following keys to fire your hotkeys.\n\n- ctrl\n- alt\n- shift\n- command (MacOS)\n- windows (Windows)\n\n## Modifiers\n\n### prevent\n\nAdd the prevent modifier to the directive to prevent default browser behavior.\n\n```vue\n\u003ctemplate\u003e\n  \u003cspan v-hotkey.prevent=\"keymap\" v-show=\"show\"\u003e\n    Press `ctrl + esc` to toggle me! Hold `enter` to hide me!\n  \u003c/span\u003e\n\u003c/template\u003e\n```\n\n### stop\n\nAdd the stop modifier to the directive to stop event propagation.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv v-hotkey.stop=\"keymap\"\u003e\n    \u003cspan\u003e Enter characters in editable areas doesn't trigger any hotkeys. \u003c/span\u003e\n    \u003cinput\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Key Code Alias\n\nThe default key code map is based on US standard keyboard.\nThis ability to provide their own key code alias for developers who using keyboards with different layouts. The alias name must be a **single character**.\n\n### Definition\n\n```javascript\nimport Vue from 'vue'\nimport VueHotkey from 'v-hotkey'\n\nVue.use(VueHotkey, {\n  '①': 49 // the key code of character '1'\n})\n```\n\n### Template\n\n```vue\n\u003cspan v-hotkey=\"keymap\"\u003e\u003c/span\u003e\n\u003cscript\u003e\nexport default {\n  foo () {\n    console.log('Hooray!')\n  },\n  computed: {\n    keymap () {\n      return {\n        '①': foo\n      }\n    }\n  }\n}\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDafrok%2Fv-hotkey","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDafrok%2Fv-hotkey","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDafrok%2Fv-hotkey/lists"}