{"id":15294945,"url":"https://github.com/jcc/v-distpicker","last_synced_at":"2025-05-15T01:04:46.629Z","repository":{"id":18779283,"uuid":"85286086","full_name":"jcc/v-distpicker","owner":"jcc","description":":sparkles: A flexible, highly available district picker for picking provinces, cities and districts of China.","archived":false,"fork":false,"pushed_at":"2023-12-01T10:21:58.000Z","size":2122,"stargazers_count":977,"open_issues_count":11,"forks_count":235,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-04-06T21:05:00.023Z","etag":null,"topics":["component","distpicker","vue","vue-component","vuejs"],"latest_commit_sha":null,"homepage":"https://jcc.github.io/v-distpicker/","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/jcc.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.zh-CN.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-03-17T08:02:46.000Z","updated_at":"2025-04-01T01:29:57.000Z","dependencies_parsed_at":"2024-01-07T12:55:32.487Z","dependency_job_id":"08950ded-2c0c-4753-aef4-55ee315bd295","html_url":"https://github.com/jcc/v-distpicker","commit_stats":{"total_commits":196,"total_committers":14,"mean_commits":14.0,"dds":"0.45408163265306123","last_synced_commit":"faf6d4804ac08e6fc69d91bb1313fa4e61be4332"},"previous_names":[],"tags_count":57,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcc%2Fv-distpicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcc%2Fv-distpicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcc%2Fv-distpicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcc%2Fv-distpicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcc","download_url":"https://codeload.github.com/jcc/v-distpicker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248799670,"owners_count":21163398,"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":["component","distpicker","vue","vue-component","vuejs"],"created_at":"2024-09-30T17:08:03.237Z","updated_at":"2025-04-13T23:44:16.606Z","avatar_url":"https://github.com/jcc.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","UI组件","Components \u0026 Libraries","UI Components","UI Components [🔝](#readme)"],"sub_categories":["Component Collections","形成","UI Components","Form"],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://pigjian.com/images/v-distpicker.png\" alt=\"Powered By Jiajian Chan\" width=\"160\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eA flexible, highly available district selector for picking provinces, cities and districts of China. \u003c/p\u003e\n\n# V - Distpicker\n\n![github-stars](https://img.shields.io/github/stars/jcc/v-distpicker.svg) ![github-stars](http://img.shields.io/npm/v/v-distpicker.svg?style=flat-square) ![download-image](https://img.shields.io/npm/dm/v-distpicker.svg?style=flat-square)\n\n[Documents and Demo ](https://jcc.github.io/v-distpicker/)\n\n[English] | [简体中文](./README.zh_CN.md)\n\n[CHANGELOG](./CHANGELOG.zh-CN.md)\n\n## Installation\n\nVue 2\n\n```shell\nnpm install v-distpicker@^1.3.3 --save\n```\n\nVue 3\n\n```shell\nnpm install v-distpicker@^2.1.0 --save\n```\n\nCDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/v-distpicker@version/dist/v-distpicker.js\"\u003e\u003c/script\u003e\n\u003c!-- or --\u003e\n\u003cscript src=\"https://unpkg.com/v-distpicker@version/dist/v-distpicker.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n**Register component**\n\nRegiste global component:\n\n```javascript\nimport VDistpicker from 'v-distpicker'\nconst app = createApp(App)\napp.component('v-distpicker', VDistpicker)\n```\n\nUse setup-api:\n\n```javascript\n\u003cscript setup\u003eimport VDistpicker from 'v-distpicker'\u003c/script\u003e\n```\n\nRegiste component:\n\n```javascript\nimport { defineComponent } from 'vue'\nimport VDistpicker from 'v-distpicker'\n\nexport default defineComponent({\n  components: { VDistpicker },\n})\n```\n\n**How to use**\n\nBasic:\n\n```javascript\n\u003cv-distpicker\u003e\u003c/v-distpicker\u003e\n```\n\nDefault Value:\n\n```javascript\n\u003cv-distpicker province=\"广东省\" city=\"广州市\" area=\"海珠区\"\u003e\u003c/v-distpicker\u003e\n```\n\nMobile:\n\n```javascript\n\u003cv-distpicker type=\"mobile\"\u003e\u003c/v-distpicker\u003e\n```\n\nDemo:\n\n```vue\n\u003ctemplate\u003e\n  \u003cv-distpicker\n    :province=\"select.province\"\n    :city=\"select.city\"\n    :area=\"select.area\"\n    @selected=\"onSelect\"\n    @change=\"onChange\"\n    @province=\"selectProvince\"\n    @city=\"selectCity\"\n    @area=\"selectArea\"\n  \u003e\u003c/v-distpicker\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport VDistpicker from 'v-distpicker'\nlet select = reactive({ province: '', city: '', area: '' })\nfunction onSelect(data) {\n  console.log(data)\n}\nfunction onChange(data) {\n  console.log(data)\n}\nfunction selectProvince({ code, value }) {\n  select.province = value\n  console.log({ code, value })\n}\nfunction selectCity({ code, value }) {\n  select.city = value\n  console.log({ code, value })\n}\nfunction selectArea({ code, value }) {\n  select.area = value\n  console.log({ code, value })\n}\n\u003c/script\u003e\n```\n\n## Props\n\n| Name              | Type          | Description               | Default                      | Sample                              |\n| ----------------- | ------------- | ------------------------- | ---------------------------- | ----------------------------------- |\n| province          | String/Number | 省级编码或名称            |                              | '广东省'/440000/'440000'            |\n| city              | String/Number | 市级编码或名称            |                              | '广州市'/440100/'440100'            |\n| area              | String/Number | 区级编码或名称            |                              | '海珠区'/440105/'440105'            |\n| placeholder       | Object        | 默认显示的值              |                              | {province:'省',city:'市',area:'区'} |\n| type              | String        | 区分 pc 和 mobile,默认 pc |                              |                                     |\n| only-province     | Boolean       | 只显示省级选择器          | false                        |                                     |\n| hide-area         | Boolean       | 隐藏区级                  | false                        |                                     |\n| disabled          | Boolean       | 禁用                      | false                        |                                     |\n| province-disabled | Boolean       | 禁用省                    | false                        |                                     |\n| city-disabled     | Boolean       | 禁用市                    | false                        |                                     |\n| area-disabled     | Boolean       | 禁用区                    | false                        |                                     |\n| province-source   | Object        | 省数据源                  |                              | examples/components/data            |\n| city-source       | Object        | 市级数据源                |                              |                                     |\n| address-source    | Object        | 区级数据源                |                              |                                     |\n| wrapper           | String        | className                 | 'distpicker-address-wrapper' |                                     |\n| address-header    | String        | className(mobile)         | 'address-header'             |                                     |\n| address-container | String        | className(mobile)         | 'address-container'          |                                     |\n\n## Event\n\n| Name            | Type     | Description        | Return                                                       |\n| --------------- | -------- | ------------------ | ------------------------------------------------------------ |\n| province        | Function | 选择省时触发       | {code,value}                                                 |\n| city            | Function | 选择市时触发       | {code,value}                                                 |\n| area            | Function | 选择区时触发       | {code,value}                                                 |\n| selected        | Function | 选择最后一项时触发 | {province:{code,value},city:{code,value},area:{code,value} } |\n| change-province | Function | 省级改变时触发     | {code,value}                                                 |\n| change-city     | Function | 市级改变时触发     | {code,value}                                                 |\n| change-area     | Function | 区级改变时触发     | {code,value}                                                 |\n| change          | Function | 省市区改变时触发   | {province:{code,value},city:{code,value},area:{code,value} } |\n\n## Contributors\n\n\u003ca href=\"https://github.com/jcc/v-distpicker/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=jcc/v-distpicker\" /\u003e\n\u003c/a\u003e\n\n## Thanks\n\n- [Distpicker](https://github.com/fengyuanchen/distpicker)\n\n## License\n\nThe plugin is open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcc%2Fv-distpicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcc%2Fv-distpicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcc%2Fv-distpicker/lists"}