{"id":20829353,"url":"https://github.com/heftykoo/vue-auto-focus","last_synced_at":"2025-08-22T22:44:34.653Z","repository":{"id":57394574,"uuid":"78935876","full_name":"HeftyKoo/vue-auto-focus","owner":"HeftyKoo","description":"A vue directive that can let you control your input and textarea auto focus very easily!  Vue指令,你可以很方便地对页面中所有input和textarea的自动聚焦行为进行流程控制","archived":false,"fork":false,"pushed_at":"2017-01-14T11:57:57.000Z","size":5986,"stargazers_count":47,"open_issues_count":0,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-04T16:43:07.479Z","etag":null,"topics":["autofocus","form","input-textarea","vue","vue-directive"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HeftyKoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-14T11:18:51.000Z","updated_at":"2023-11-06T12:17:14.000Z","dependencies_parsed_at":"2022-09-10T23:11:38.194Z","dependency_job_id":null,"html_url":"https://github.com/HeftyKoo/vue-auto-focus","commit_stats":null,"previous_names":["yeyuqiudeng/vue-auto-focus"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/HeftyKoo/vue-auto-focus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HeftyKoo%2Fvue-auto-focus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HeftyKoo%2Fvue-auto-focus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HeftyKoo%2Fvue-auto-focus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HeftyKoo%2Fvue-auto-focus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HeftyKoo","download_url":"https://codeload.github.com/HeftyKoo/vue-auto-focus/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HeftyKoo%2Fvue-auto-focus/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259971377,"owners_count":22940012,"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":["autofocus","form","input-textarea","vue","vue-directive"],"created_at":"2024-11-17T23:20:01.036Z","updated_at":"2025-06-15T12:07:45.156Z","avatar_url":"https://github.com/HeftyKoo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-auto-focus\n\n[![GitHub issues](https://img.shields.io/github/issues/yeyuqiudeng/vue-auto-focus.svg)](https://github.com/yeyuqiudeng/vue-auto-focus/issues)\n[![GitHub forks](https://img.shields.io/github/forks/yeyuqiudeng/vue-auto-focus.svg)](https://github.com/yeyuqiudeng/vue-auto-focus/network)\n[![GitHub stars](https://img.shields.io/github/stars/yeyuqiudeng/vue-auto-focus.svg)](https://github.com/yeyuqiudeng/vue-auto-focus/stargazers)\n[![Twitter](https://img.shields.io/twitter/url/https/github.com/yeyuqiudeng/vue-auto-focus.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:\u0026url=%5Bobject%20Object%5D)\n\n[![NPM](https://nodei.co/npm/vue-auto-focus.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/vue-auto-focus/)\n\n## Description\n\nA vue directive that can let you control your input and textarea auto focus very easily!\n\nVue指令,你可以很方便地对页面中所有input和textarea的自动聚焦行为进行流程控制\n\n## Installation\n\n    npm install vue-auto-focus\n   \n## Usage\n\n### 引入指令\n\n    import AutoFocus from 'vue-auto-focus'\n    Vue.use(AutoFocus)\n\n### 限制\n* 指令必需用在需要控制的input和textarea元素父节点上\n* 需要指令控制自动聚焦的input和textarea元素必需设置data-index属性\n\n### 使用说明\n看使用说明时,请参对例子\n* data-current 指令挂载的父元素的属性,为当前聚焦的元素的data-index属性的值\n* data-action 执行指令时的自动聚焦行为,值为next时,自动聚焦到下一个元素,prev时,聚焦到上一个元素,first时聚焦到第一个元素,last时聚焦到最后一个元素,jump时,跳转到指令的元素\n* v-auto-focus=\"focusCtrl\"  指令值,指令值变化时,执行data-action指定的行为\n* 自动聚焦后,需要监听@focus,更新data-current的值,否则下一次指令执行时,不会得到预期的行为\n\n## Example\n\n[例子](https://github.com/yeyuqiudeng/vue-auto-focus/blob/master/example/example.vue)\n    \n    \u003ctemplate\u003e\n        \u003cform v-auto-focus=\"focusCtrl\" :data-current=\"currentIndex\" :data-action=\"actionType\"\u003e\n            \u003cinput @focus=\"setFocusIndex(0)\" type=\"text\" data-index=\"0\"\u003e\n            \u003cinput @focus=\"setFocusIndex(1)\" type=\"text\" data-index=\"1\"\u003e\n            \u003ctextarea @focus=\"setFocusIndex(2)\" name=\"\" id=\"\" cols=\"30\" rows=\"10\" data-index=\"2\"\u003e\u003c/textarea\u003e\n            \u003cinput @focus=\"setFocusIndex(3)\" type=\"text\" data-index=\"3\"\u003e\n        \u003c/form\u003e\n    \u003c/template\u003e\n    \n    \u003cstyle rel=\"stylesheet/less\" lang=\"less\" scoped\u003e\n        \n    \u003c/style\u003e\n    \n    \u003cscript type=\"text/babel\"\u003e\n        export default {\n            data() {\n                return {\n                    focusCtrl: 0,  // 自动聚焦控制,变动时,执行自动聚焦指令\n                    currentIndex: 0, // 当前聚焦元素的索引\n                    actionType: 'next', // 自动聚焦的行为类型\n                }\n            },\n            methods: {\n                /**\n                 * 控制自动聚焦指令执行\n                 * @param actionType {string} 自动聚焦类型 it can be 'next'/'prev'/'first'/'last'/'jump'\n                 * @param index {string} 当actionType为'jump'时,需要传入将要聚焦元素的索引\n                 **/\n                setFocus(actionType,index) {\n                    if (actionType === 'jump') {\n                        this.currentIndex = index\n                    }\n                    this.focusCtrl++\n                    this.actionType = actionType\n                },\n                /**\n                 * 元素聚焦时,获取当前聚焦元素的索引\n                 * @param index {number} 当前聚焦的索引\n                 **/\n                setFocusIndex(index) {\n                    this.currentIndex = index\n                },\n            }\n        }\n        \n    \u003c/script\u003e\n    \n## Development\n\n    npm run dev\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheftykoo%2Fvue-auto-focus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheftykoo%2Fvue-auto-focus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheftykoo%2Fvue-auto-focus/lists"}