{"id":13824180,"url":"https://github.com/HJ29/vue3-scroll-picker","last_synced_at":"2025-07-08T19:30:55.247Z","repository":{"id":41457119,"uuid":"298995294","full_name":"HJ29/vue3-scroll-picker","owner":"HJ29","description":null,"archived":false,"fork":false,"pushed_at":"2021-04-23T12:25:46.000Z","size":1543,"stargazers_count":30,"open_issues_count":4,"forks_count":11,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-10T04:52:57.695Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/HJ29.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":"2020-09-27T09:16:41.000Z","updated_at":"2024-10-22T11:56:03.000Z","dependencies_parsed_at":"2022-09-26T17:00:52.789Z","dependency_job_id":null,"html_url":"https://github.com/HJ29/vue3-scroll-picker","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HJ29%2Fvue3-scroll-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HJ29%2Fvue3-scroll-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HJ29%2Fvue3-scroll-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HJ29%2Fvue3-scroll-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HJ29","download_url":"https://codeload.github.com/HJ29/vue3-scroll-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225457748,"owners_count":17477348,"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":[],"created_at":"2024-08-04T09:00:58.176Z","updated_at":"2024-11-20T02:30:24.794Z","avatar_url":"https://github.com/HJ29.png","language":"Vue","funding_links":[],"categories":["Packages","UI Components [🔝](#readme)","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# vue3-scroll-picker\n\nVue 3 scroll picker plugin.\n\n### Demo\n[Demo](https://hj29.github.io/vue3-scroll-picker/)\n\n[Demo Code](https://github.com/HJ29/vue3-scroll-picker/tree/master/example/src/)\n\n### Install\n```bash\nyarn add vue3-scroll-picker\nnpm i --save vue3-scroll-picker\n```\n\n### Register Global Component\n```js\nimport { createApp } from 'vue';\nimport App from './App.vue'\nimport ScrollPicker from 'vue3-scroll-picker';\n\nconst app = createApp(App);\napp.use(ScrollPicker);\napp.mount('#app')\n```\n\n### Register Local Component\n```js\nimport ScrollPicker from 'vue3-scroll-picker';\n\nexport default {\n components: {\n ScrollPicker,\n },\n};\n```\n\n### Example\n```vue\n\u003ctemplate\u003e\n \u003cscroll-picker \n :options=\"options\" \n v-model=\"selections\"\n /\u003e\n\u003c/template\u003e\n```\n```vue\n\u003cscript\u003e\nimport { defineComponent, reactive, toRefs } from 'vue';\nconst exampleOptions = [\n [\n {\n label: \"A1\",\n value: \"a1\"\n },\n {\n label: \"A2\",\n value: \"a2\"\n },\n ],\n [\n {\n label: \"B1\",\n value: \"b1\"\n },\n {\n label: \"B2\",\n value: \"b2\"\n },\n ],\n];\nexport default defineComponent({\n setup() {\n const state = reactive({\n options: exampleOptions,\n selections: ['a2','b1'],\n });\n return {\n ...toRefs(state),\n };\n }\n});\n\u003c/script\u003e\n```\n\n### Props\n\n| Name | Type | Required | Default | Notes |\n| ---------------------- | -------------------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| :options | string[][]\u003cbr\u003e{ label: string; value: string }[][] | yes | [] | Options use can select.\u003cbr\u003e label value type: label as display, value to emit\u003cbr\u003elabel value example: [ [ { label: 'A1', value: 'a1' }, { label: 'A2', value: 'a2' } ], [ { label: 'B1', value: 'b1' } ] ]\u003cbr\u003estring type: same label and value\u003cbr\u003estring type example: [ [ 'a1', 'a2' ], [ 'b1' ] ] |\n| :valueModel \\| v-model | string[] | yes | [] | Array value emit\u003cbr\u003eExample: [ 'a2', 'b1' ] |\n| active-style | string | no | '' | css (change active option style)style |\n| inactive-style | string | no | '' | css (change inactive option style)style |\n| active-class | string | no | '' | css class |\n| inactive-class | string | no | '' | css class |\n| wheel-speed | number | no | 1 | adjust mouse wheel speed with this value.\u003cbr\u003elower wheel speed, slower scroller |\n\n### Event\n| Name | Description |\n| ------------------ | -------------------------- |\n| @update:modelValue | event emit when use select |\n\n### Slot\n| Name | prop | Description |\n| --------------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------------- |\n| v-slot:option | active: boolean\u003cbr/\u003eitem: string \\| { label: string; value: string } | override option card |\n| v-slot:center-overlay | | override center active option area, able to add seperator to active area |\n| v-slot:top-overlay | | override top inactive option area, able to change top gradient color |\n| v-slot:bottom-overlay | | override bottom inactive option area, able to change bottom gradient color |\n\n## Project setup\n```\nyarn\n```\n\n### Compiles and hot-reloads for development\n```\nyarn serve\n```\n\n### Compiles and minifies for production\n```\nyarn build\n```\n\n### Customize configuration\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHJ29%2Fvue3-scroll-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHJ29%2Fvue3-scroll-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHJ29%2Fvue3-scroll-picker/lists"}