{"id":14236035,"url":"https://github.com/hiyali/vue-smooth-picker","last_synced_at":"2025-04-13T20:30:34.007Z","repository":{"id":20472511,"uuid":"86327295","full_name":"hiyali/vue-smooth-picker","owner":"hiyali","description":"🏄🏼  A SmoothPicker for Vue 2 (like native datetime picker of iOS)","archived":false,"fork":false,"pushed_at":"2023-04-18T08:32:44.000Z","size":3842,"stargazers_count":215,"open_issues_count":9,"forks_count":35,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-31T06:36:09.040Z","etag":null,"topics":["awesome","data","datetime","picker","smooth","vue","vue-picker","vue2"],"latest_commit_sha":null,"homepage":"https://hiyali.github.io/vue-smooth-picker","language":"Vue","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/hiyali.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2017-03-27T11:29:18.000Z","updated_at":"2024-07-09T09:49:59.000Z","dependencies_parsed_at":"2024-01-07T12:51:48.288Z","dependency_job_id":"9569adb3-99a7-4736-89e1-9f21994ac0d1","html_url":"https://github.com/hiyali/vue-smooth-picker","commit_stats":{"total_commits":126,"total_committers":4,"mean_commits":31.5,"dds":"0.19841269841269837","last_synced_commit":"771c6f86b0fafd443962157dcd64a21b5788d36e"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiyali%2Fvue-smooth-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiyali%2Fvue-smooth-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiyali%2Fvue-smooth-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hiyali%2Fvue-smooth-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hiyali","download_url":"https://codeload.github.com/hiyali/vue-smooth-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223599156,"owners_count":17171419,"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":["awesome","data","datetime","picker","smooth","vue","vue-picker","vue2"],"created_at":"2024-08-20T21:02:42.822Z","updated_at":"2024-11-07T23:13:22.219Z","avatar_url":"https://github.com/hiyali.png","language":"Vue","funding_links":["https://opencollective.com/vue-smooth-picker"],"categories":["Vue","UI组件","Components \u0026 Libraries","Recently Updated","UI Components","UI Components [🔝](#readme)"],"sub_categories":["形成","UI Components","[Feb 05, 2025](/content/2025/02/05/README.md)","Form"],"readme":"# vue-smooth-picker  \u003csup\u003e[![Version Badge](http://versionbadg.es/hiyali/vue-smooth-picker.svg)](https://npmjs.com/package/vue-smooth-picker)\u003c/sup\u003e\n🏄🏼 A SmoothPicker for Vue 2\n\n[![travis build](https://img.shields.io/travis/hiyali/vue-smooth-picker/master.svg)](https://travis-ci.org/hiyali/vue-smooth-picker)\n[![NPM downloads](http://img.shields.io/npm/dt/vue-smooth-picker.svg)](https://npmjs.org/package/vue-smooth-picker)\n![JS gzip size](http://img.badgesize.io/hiyali/vue-smooth-picker/gh-pages/dist/smooth-picker.js.svg?compression=gzip\u0026label=gzip:%20JS)\n![CSS gzip size](http://img.badgesize.io/hiyali/vue-smooth-picker/gh-pages/dist/css/style.css.svg?compression=gzip\u0026label=gzip:%20CSS)\n\n[![NPM Description](https://nodei.co/npm/vue-smooth-picker.png?downloads=true\u0026stars=true)](https://npmjs.org/package/vue-smooth-picker)\n\n\u003e Let's more easily select some data on the touch screen device, such as time / city / gender / seat number / product / ...\n\n## Take a look\n\nDemo links:\n[Product](https://hiyali.github.io/vue-smooth-picker/example/product)\n| [Datetime](https://hiyali.github.io/vue-smooth-picker/example/datetime)\n| [Gender](https://hiyali.github.io/vue-smooth-picker/example/gender)\n\nDemo code links:\n[Product](https://github.com/hiyali/vue-smooth-picker/tree/gh-pages/example/product)\n| [Datetime](https://github.com/hiyali/vue-smooth-picker/tree/gh-pages/example/datetime)\n| [Gender](https://github.com/hiyali/vue-smooth-picker/tree/gh-pages/example/gender)\n\n![Screen shot](https://raw.githubusercontent.com/hiyali/vue-smooth-picker/gh-pages/assets/smooth-picker-screenshot.png \"screenshot\")\n\n![Screen record](https://raw.githubusercontent.com/hiyali/vue-smooth-picker/gh-pages/assets/smooth-picker-screen-record.gif \"screen record\")\n\n## Install\n\n```shell\nnpm i -S vue-smooth-picker\n```\n\n## Usage\n\n\u003e [English usage docs](https://github.com/hiyali/vue-smooth-picker/wiki/Usage)\n\n\u003e [中文使用文档](https://github.com/hiyali/vue-smooth-picker/wiki/Usage_zh)\n\n### Quick look\n\n```javascript\n// import and use\nimport 'vue-smooth-picker/dist/css/style.css'\nimport SmoothPicker from 'vue-smooth-picker'\nVue.use(SmoothPicker)\n...\n// in your template\n\u003csmooth-picker ref=\"smoothPicker\" :data=\"data\" :change=\"change\" /\u003e\n```\nOr see: [example files](https://github.com/hiyali/vue-smooth-picker/blob/gh-pages/example/gender/)\n\n## props\n\n| name                       | type       |  default      | explain                          |\n| :------------------------- | :--------- | :------------ | :------------------------------- |\n| `change`                   | `Function` | (gIndex, iIndex) =\u003e {} | Callback after data current index changed, pass two arguments, group index `gIndex` and item index `iIndex` |\n| `data`                     | `Array`    | []            | SmoothPicker initial data        |\n| `data[i].currentIndex`     | `Number`   | 0             | Current index of this group's list |\n| `data[i].flex`             | `Number`   | 1             | Group weights in parent width `1..12` |\n| `data[i].list`             | `Array`    | -             | List of the group                |\n| `data[i].list[j]`          | `String` or `Object` | -   | Item in the list of group, use `value` key when it is a object item |\n| `data[i].onClick`          | `Function` | -             | Click event on the middle layer of this group, pass two arguments, this group index `gIndex` and selected index `iIndex` of this group |\n| `data[i].textAlign`        | `String`   | -             | `left` `center` or `right` in item block |\n| `data[i].className`        | `String`   | -             | Your custom class name for this group |\n| `data[i].divider`          | `Boolean`  | false         | If it is true, then `onClick` `list` `currentIndex` will be not used |\n| `data[i].text`             | `String`   | -             | Just used when `divider` is true |\n\n## Instance methods\n\n| name                       | type               | explain                          |\n| :------------------------- | :----------------- | :------------------------------- |\n| `setGroupData`             | `Function` =\u003e void | Dynamically set a group data with two arguments `(gIndex, gData)`, group index and group data (see props `data[i]`) |\n| `getCurrentIndexList`      | `Function` =\u003e []   | Return a `Array` of the groups current index list (has divider current index, and it is default to `0`) |\n| `getGroupsRectList`        | `Function` =\u003e void | Get some info for gesture, you can call this function when the component displayed if the component is hidden when it's initialization |\n\n## Development\n\n```shell\nnpm run dev # development\nnpm run build # build\n```\n\n## Examples\n\n\u003e See branch gh-pages.\n\n## Any problem?\n\n\u003e Please let me know.\n* [Open a new issue for this repo](https://github.com/hiyali/vue-smooth-picker/issues)\n* [Send a Email to: hiyali920@gmail.com](mailto:hiyali920@gmail.com)\n\n## Donate\n\n[![Become a sponser](https://opencollective.com/vue-smooth-picker/individuals.svg?width=890)](https://opencollective.com/vue-smooth-picker#support)\n\n🌚 [A github star ⍟](https://github.com/hiyali/vue-smooth-picker)\n\n## License\n\nMIT\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiyali%2Fvue-smooth-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhiyali%2Fvue-smooth-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhiyali%2Fvue-smooth-picker/lists"}