Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xinxingyu/vue-city
a vue component that show city infomation
https://github.com/xinxingyu/vue-city
vue
Last synced: 6 days ago
JSON representation
a vue component that show city infomation
- Host: GitHub
- URL: https://github.com/xinxingyu/vue-city
- Owner: xinxingyu
- Created: 2016-11-22T06:23:49.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-06T15:35:51.000Z (over 7 years ago)
- Last Synced: 2024-09-19T13:09:00.547Z (about 2 months ago)
- Topics: vue
- Language: Vue
- Size: 141 KB
- Stars: 126
- Watchers: 5
- Forks: 38
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-city - city?style=social) - 城市选择器 (UI组件)
- awesome-github-vue - vue-city - 城市选择器 (UI组件)
- awesome - vue-city - 城市选择器 (UI组件)
- awesome-github-vue - vue-city - 城市选择器 (UI组件)
README
## 城市选择器
> author: xinxingyu
### 展示
### 安装
> vue1.x 版
`npm install [email protected]`
> vue2.x 版
`npm install [email protected]`
### 使用DEMO
```shell
git clone .......
cd vue-city
npm install
npm run dev
```
> ES6方式
```html
{{youChoiceCityName}}
{{youChoiceCityName2}}
```
```javascript
import city from 'vue-city';
export default {
data(){
return {
youChoiceCityName: '请选择城市...',
youChoiceCityName2: '请选择城市...',
city: {
isShow: false,
cityData: [],
onChoose: null,
localCity: {},
starCity: []
},
city2: {
isShow: false,
cityData: [],
onChoose: null,
localCity: {},
starCity: []
},
}
},
components: {
city,
},
ready(){
let _this = this;
this.getCityInfo();
this.city.onChoose = function(res){
//ToDo: 选完城市后......
console.log(res);
_this.city.isShow = false;
_this.youChoiceCityName = '你选的城市是：' + res.cityName;
}
this.city2.onChoose = function(res){
//ToDo: 选完城市后......
console.log(res);
_this.city2.isShow = false;
_this.youChoiceCityName2 = '你选的城市是：' + res.cityName;
}
},
methods: {
getCityInfo: function(){
this.city.starCity = [
{
cityId: 301,
cityName: "保山",
citySpell: "BAOSHAN",
cityFirstLetter: "B",
},
{
cityId: 167,
cityName: "日照",
citySpell: "RIZHAO",
cityFirstLetter: "R",
},
]
this.city.cityData = [
{
cityId: 290,
cityName: "阿坝州",
citySpell: "ABAZHOU",
cityFirstLetter: "A",
}, {
cityId: 348,
cityName: "阿克苏地区",
citySpell: "AKESUDIQU",
cityFirstLetter: "A",
}, {
cityId: 348,
cityName: "阿克苏地区",
citySpell: "AKESUDIQU",
cityFirstLetter: "A",
}
];
this.city.localCity = {
cityId: 301,
cityName: "保山",
citySpell: "BAOSHAN",
cityFirstLetter: "B",
}
this.city2.cityData = [{
cityId: 290,
cityName: "阿坝州",
},
{
cityId: 290,
cityName: "阿坝州2",
}]
},
choiceCity () {
this.city.isShow = true;
},
choiceCity2 () {
this.city2.isShow = true;
},
close(){
this.city.isShow = false;
this.city2.isShow = false;
}
}
}
```
### API
* 属性说明
|属性|说明|类型|默认值|是否必传|
|---|----|---|-----|-------|
|simple|是否开启简单模式|Boolean|默认false|否|
|city-data|城市列表数据|Array|数据格式参考`附录`|是|
|local-city|当前城市(根据 lat, lng 参数从接口获取)|Object|数据格式参考`附录`|是|
|star-city|热门城市|Object|数据格式参考`附录`|否|
|close|点击取消的 handle可在handle中设置show=false来关闭component|Function|-|是|
|on-choose|选中某个城市后的 handle返回一个 Object 对象|Function|-|是|
> 附录
* city-data数据格式:
```javascript
let cityData = [
{
cityId: 1,
cityName: "北京",
citySpell: "BEIJING",
cityFirstLetter: "B"
},
{
cityId: 4,
cityName: "上海",
citySpell: "SHANGHAI",
cityFirstLetter: "S"
},
{
cityId: 5,
cityName: "杭州",
citySpell: "HANGZHOU",
cityFirstLetter: "H"
}]
```
* local-city数据格式:
```javascript
let localCity = {
cityId: 1,
cityName: "北京",
citySpell: "BEIJING",
cityFirstLetter: "B"
}
```
* star-city数据格式:
```javascript
let starCity = [
{
cityId: 301,
cityName: "保山",
citySpell: "BAOSHAN",
cityFirstLetter: "B",
},
{
cityId: 167,
cityName: "日照",
citySpell: "RIZHAO",
cityFirstLetter: "R",
}
]
```
### 版本升级
#### 0.2.0
* 基本功能实现
#### 1.0.0
* vue1.x 版
#### 2.0.0
* vue2.x 版