{"id":13535947,"url":"https://github.com/xinxingyu/vue-city","last_synced_at":"2025-04-02T02:31:41.832Z","repository":{"id":57394973,"uuid":"74441354","full_name":"xinxingyu/vue-city","owner":"xinxingyu","description":"a vue component  that show city infomation","archived":false,"fork":false,"pushed_at":"2017-03-06T15:35:51.000Z","size":144,"stargazers_count":125,"open_issues_count":8,"forks_count":38,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-17T19:06:13.641Z","etag":null,"topics":["vue"],"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/xinxingyu.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":"2016-11-22T06:23:49.000Z","updated_at":"2025-01-07T08:45:10.000Z","dependencies_parsed_at":"2022-09-06T02:50:10.461Z","dependency_job_id":null,"html_url":"https://github.com/xinxingyu/vue-city","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xinxingyu%2Fvue-city","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xinxingyu%2Fvue-city/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xinxingyu%2Fvue-city/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xinxingyu%2Fvue-city/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xinxingyu","download_url":"https://codeload.github.com/xinxingyu/vue-city/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246743709,"owners_count":20826590,"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-08-01T09:00:32.530Z","updated_at":"2025-04-02T02:31:41.530Z","avatar_url":"https://github.com/xinxingyu.png","language":"Vue","funding_links":[],"categories":["UI组件"],"sub_categories":[],"readme":"## 城市选择器\n\u003cp\u003e\n    \u003cimg height=\"18\" src=\"https://img.shields.io/badge/UI-v5.0-ff69b4.svg\"\u003e\n    \u003cimg height=\"18\" src=\"https://img.shields.io/badge/npm-v2.0.0-blue.svg\"\u003e\n\u003c/p\u003e\n\u003e author: xinxingyu  \n\n### 展示\n\u003cp\u003e\n\t\u003cimg width=\"300px\" src=\"https://github.com/xinxingyu/vue-city/blob/master/static/img/intro1.jpg\"\u003e\n\t\u003cimg width=\"300px\" style=\"margin-left:20px;\" src=\"https://github.com/xinxingyu/vue-city/blob/master/static/img/intro2.jpg\"\u003e\n\u003cp\u003e\n\n### 安装\n\u003e vue1.x 版\n`npm install vue-city@1.0.0`\n\n\u003e vue2.x 版\n`npm install vue-city@2.0.0`\n\n### 使用DEMO\n\n```shell\n\tgit clone .......\n\tcd vue-city\n\tnpm install\n\tnpm run dev\n```\n\u003e ES6方式\n\n```html\n\t\u003cdiv id=\"app\"\u003e\n\t\t\u003cdiv class=\"choice\" @click=\"choiceCity()\"\u003e{{youChoiceCityName}}\u003c/div\u003e\n\t    \u003cdiv class=\"choice\" @click=\"choiceCity2()\"\u003e{{youChoiceCityName2}}\u003c/div\u003e\n\t    \u003cdiv id=\"app\"\u003e\n\t        \u003ccity\n\t            :is-show.sync='city.isShow'\n\t            :on-choose='city.onChoose'\n\t            :city-data='city.cityData'\n\t            :local-city='city.localCity'\n\t            :star-city='city.starCity'\n\t\t\t\t:close=\"close\"\n\t            \u003e\u003c/city\u003e\n\t        \u003ccity\n\t\t\t\t:simple='true'\n\t            :is-show.sync='city2.isShow'\n\t            :on-choose='city2.onChoose'\n\t            :city-data='city2.cityData'\n\t            :local-city='city2.localCity'\n\t            :star-city='city2.starCity'\n\t\t\t\t:close=\"close\"\n\t            \u003e\u003c/city\u003e\n\t    \u003c/div\u003e\n\t\u003c/div\u003e\n```\n\n```javascript\n\timport city from 'vue-city';\n\n    export default {\n        data(){\n            return {\n\t\t\t\tyouChoiceCityName: '请选择城市...',\n                youChoiceCityName2: '请选择城市...',\n                city: {\n                    isShow: false,\n                    cityData: [],\n                    onChoose: null,\n                    localCity: {},\n                    starCity: []\n                },\n                city2: {\n                    isShow: false,\n                    cityData: [],\n                    onChoose: null,\n                    localCity: {},\n                    starCity: []\n                },\n            }\n        },\n        components: {\n            city,\n        },\n        ready(){\n            let _this = this;\n            this.getCityInfo();\n            this.city.onChoose = function(res){\n                //ToDo: 选完城市后......\n                console.log(res);\n\t\t\t\t_this.city.isShow = false;\n                _this.youChoiceCityName = '你选的城市是：' + res.cityName;\n            }\n\t\t\tthis.city2.onChoose = function(res){\n                //ToDo: 选完城市后......\n                console.log(res);\n\t\t\t\t_this.city2.isShow = false;\n                _this.youChoiceCityName2 = '你选的城市是：' + res.cityName;\n            }\n        },\n        methods: {\n            getCityInfo: function(){\n                this.city.starCity = [\n                    {\n                       cityId: 301,\n                       cityName: \"保山\",\n                       citySpell: \"BAOSHAN\",\n                       cityFirstLetter: \"B\",\n                    },\n                    {\n                        cityId: 167,\n                        cityName: \"日照\",\n                        citySpell: \"RIZHAO\",\n                        cityFirstLetter: \"R\",\n                    },\n                ]\n\n                this.city.cityData = [\n                    {\n                        cityId: 290,\n                        cityName: \"阿坝州\",\n                        citySpell: \"ABAZHOU\",\n                        cityFirstLetter: \"A\",\n                    }, {\n                        cityId: 348,\n                        cityName: \"阿克苏地区\",\n                        citySpell: \"AKESUDIQU\",\n                        cityFirstLetter: \"A\",\n                    }, {\n                        cityId: 348,\n                        cityName: \"阿克苏地区\",\n                        citySpell: \"AKESUDIQU\",\n                        cityFirstLetter: \"A\",\n                    }\n                ];\n                this.city.localCity = {\n                    cityId: 301,\n                    cityName: \"保山\",\n                    citySpell: \"BAOSHAN\",\n                    cityFirstLetter: \"B\",\n                }\n\t\t\t\tthis.city2.cityData = [{\n\t\t\t\t\tcityId: 290,\n\t\t\t\t\tcityName: \"阿坝州\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcityId: 290,\n\t\t\t\t\tcityName: \"阿坝州2\",\n\t\t\t\t}]\n            },\n            choiceCity () {\n                this.city.isShow = true;\n            },\n\t\t\tchoiceCity2 () {\n\t\t\t\tthis.city2.isShow = true;\n\t\t\t},\n\t\t\tclose(){\n\t\t\t\tthis.city.isShow = false;\n\t\t\t\tthis.city2.isShow = false;\n\t\t\t}\n        }\n    }\n```\n\n### API\n* 属性说明\n\n|属性|说明|类型|默认值|是否必传|\n|---|----|---|-----|-------|\n|simple|是否开启简单模式|Boolean|默认false|否|\n|city-data|城市列表数据|Array|数据格式参考`附录`|是|\n|local-city|当前城市\u003c/br\u003e(根据 lat, lng 参数从接口获取)|Object|数据格式参考`附录`|是|\n|star-city|热门城市\u003c/br\u003e|Object|数据格式参考`附录`|否|\n|close|点击取消的 handle\u003c/br\u003e可在handle中设置show=false来关闭component|Function|-|是|\n|on-choose|选中某个城市后的 handle\u003c/br\u003e返回一个 Object 对象|Function|-|是|\n\n\u003e 附录\n\n* city-data数据格式:\n```javascript\n    let cityData = [\n        {\n    \t\tcityId: 1,\n    \t\tcityName: \"北京\",\n    \t\tcitySpell: \"BEIJING\",\n    \t\tcityFirstLetter: \"B\"\n    \t},\n    \t{\n    \t\tcityId: 4,\n    \t\tcityName: \"上海\",\n    \t\tcitySpell: \"SHANGHAI\",\n    \t\tcityFirstLetter: \"S\"\n    \t},\n    \t{\n    \t\tcityId: 5,\n    \t\tcityName: \"杭州\",\n    \t\tcitySpell: \"HANGZHOU\",\n    \t\tcityFirstLetter: \"H\"\n    \t}]\n```\n\n* local-city数据格式:\n```javascript\n    let localCity = {\n\t\tcityId: 1,\n\t\tcityName: \"北京\",\n\t\tcitySpell: \"BEIJING\",\n\t\tcityFirstLetter: \"B\"\n\t   }\n```\n\n* star-city数据格式:\n```javascript\n    let starCity = [\n        {\n           cityId: 301,\n           cityName: \"保山\",\n           citySpell: \"BAOSHAN\",\n           cityFirstLetter: \"B\",\n        },\n        {\n            cityId: 167,\n            cityName: \"日照\",\n            citySpell: \"RIZHAO\",\n            cityFirstLetter: \"R\",\n        }\n    ]\n```\n\n### 版本升级\n\n#### 0.2.0\n* 基本功能实现\n\n#### 1.0.0\n* vue1.x 版\n\n#### 2.0.0\n* vue2.x 版\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxinxingyu%2Fvue-city","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxinxingyu%2Fvue-city","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxinxingyu%2Fvue-city/lists"}