vue1.x 版
npm install vue-city@1.0.0
vue2.x 版
npm install vue-city@2.0.0
git clone .......
cd vue-city
npm install
npm run devES6方式
<div id="app"> <div class="choice" @click="choiceCity()">{{youChoiceCityName}}</div> <div class="choice" @click="choiceCity2()">{{youChoiceCityName2}}</div> <div id="app"> <city :is-show.sync='city.isShow' :on-choose='city.onChoose' :city-data='city.cityData' :local-city='city.localCity' :star-city='city.starCity' :close="close" ></city> <city :simple='true' :is-show.sync='city2.isShow' :on-choose='city2.onChoose' :city-data='city2.cityData' :local-city='city2.localCity' :star-city='city2.starCity' :close="close" ></city> </div> </div>
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; } } }
- 属性说明
| 属性 | 说明 | 类型 | 默认值 | 是否必传 |
|---|---|---|---|---|
| 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数据格式:
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数据格式:
let localCity = { cityId: 1, cityName: "北京", citySpell: "BEIJING", cityFirstLetter: "B" }
- star-city数据格式:
let starCity = [ { cityId: 301, cityName: "保山", citySpell: "BAOSHAN", cityFirstLetter: "B", }, { cityId: 167, cityName: "日照", citySpell: "RIZHAO", cityFirstLetter: "R", } ]
- 基本功能实现
- vue1.x 版
- vue2.x 版