{"id":13424211,"url":"https://github.com/simplesmiler/vue-focus","last_synced_at":"2025-04-12T23:38:12.533Z","repository":{"id":44576715,"uuid":"48305706","full_name":"simplesmiler/vue-focus","owner":"simplesmiler","description":"A reusable focus directive for reusable Vue.js components","archived":false,"fork":false,"pushed_at":"2021-04-18T05:27:35.000Z","size":23,"stargazers_count":403,"open_issues_count":11,"forks_count":40,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-12T23:38:07.504Z","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}},"created_at":"2015-12-20T03:20:11.000Z","updated_at":"2025-02-28T03:02:36.000Z","dependencies_parsed_at":"2022-09-09T05:10:44.637Z","dependency_job_id":null,"html_url":"https://github.com/simplesmiler/vue-focus","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplesmiler%2Fvue-focus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplesmiler%2Fvue-focus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplesmiler%2Fvue-focus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simplesmiler%2Fvue-focus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simplesmiler","download_url":"https://codeload.github.com/simplesmiler/vue-focus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647255,"owners_count":21139081,"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.232Z","updated_at":"2025-04-12T23:38:12.504Z","avatar_url":"https://github.com/simplesmiler.png","language":"JavaScript","readme":"# vue-focus\n\n\u003e A reusable focus directive for reusable [Vue.js](https://github.com/vuejs/vue) components\n\n[![npm version](https://img.shields.io/npm/v/vue-focus.svg)](https://www.npmjs.com/package/vue-focus)\n\n## Overview\n\nIt can be tricky to manage input focus. You always have to fall back to accessing DOM elements and calling `.focus` or `.blur` on them.\n\nWell not anymore. `vue-focus` lets you manage focus from the safety of your view model.\n\n[Check out the examples](https://jsfiddle.net/simplesmiler/zak1t6o8/), [read the docs](#api) or [file an issue](https://github.com/simplesmiler/vue-focus/issues).\n\n## Use cases\n\n- Focus the field when the modal windows appears\n- Track the focus to show a hint for the focused field\n- Move between fields with cursor keys\n- Implement custom focus-related controls (e.g labels)\n\n## Requirements\n\n- vue: ^2.0.0\n\nIf you need a version for Vue 1, try `vue-focus@1.0`.\n\n## Install\n\nFrom npm:\n\n``` sh\n$ npm install vue-focus --save\n```\n\nFrom CDN:\n\n``` html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/vue-focus/2.1.0/vue-focus.js\"\u003e\u003c/script\u003e\n\u003c!-- OR --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/vue-focus/2.1.0/vue-focus.min.js\"\u003e\u003c/script\u003e\n```\n\n## API\n\n### `focus`\n\nA directive that binds focus to the expression in a one-way manner, so that the element receives focus when the expression is `truthy` and loses focus when the expression is `falsy`.\n\n``` js\nimport { focus } from 'vue-focus';\n\nexport default {\n  directives: { focus: focus },\n  template: '\u003cinput type=\"text\" v-focus=\"focused\" @focus=\"focused = true\" @blur=\"focused = false\"\u003e',\n  data: function() {\n    return {\n      focused: false,\n    };\n  },\n};\n```\n\n\u003e NOTE: As opposed to 1.x, in Vue 2.0, directives are updated every time the host component rerenders, not just when the directive expression chages. Somethimes this may be undesirable, especially for the \"autofocus\" use case. If you want to mimic the 1.x behavior, then add the `.lazy` modifier to the directive, e.g. `v-focus.lazy=\"true\"`.\n\n### `mixin`\n\nA mixin that makes the `v-focus` directive available to the component under the default name.\n\n``` js\nimport { mixin as focusMixin }  from 'vue-focus';\n\nexport default {\n  mixins: [ focusMixin ],\n  template: '\u003cinput type=\"text\" v-focus=\"focused\" @focus=\"focused = true\" @blur=\"focused = false\"\u003e',\n  data: function() {\n    return {\n      focused: false,\n    };\n  },\n};\n```\n\n## Caveats\n\n1. Although you can write an input that gains focus immediately after loosing it, this is not recommended, as two such inputs will fall into infinite recursion and freeze the browser.\n\n## Notes\n\nForm elements are not the only elements that are able to receive focus. The list also includes links, elements with `tabindex` attribute set and elements with `contentEditable` set to `true`.\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n","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","Form"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplesmiler%2Fvue-focus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimplesmiler%2Fvue-focus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimplesmiler%2Fvue-focus/lists"}