城市选择器
> author: xinxingyu
展示
安装
vue1.x 版
npm install vue-city@1.0.0
vue2.x 版
npm install vue-city@2.0.0
使用DEMO
git clone ....... cd vue-city npm install npm run dev
ES6方式
{{youChoiceCityName}} {{youChoiceCityName2}}
; { return youChoiceCityName: '请选择城市...' youChoiceCityName2: '请选择城市...' city: isShow: false cityData: onChoose: null localCity: {} starCity: city2: isShow: false cityData: onChoose: null localCity: {} starCity: } components: city { let _this = this; this; thiscity{ //ToDo: 选完城市后...... console; _thiscityisShow = false; _thisyouChoiceCityName = '你选的城市是:' + rescityName; } thiscity2{ //ToDo: 选完城市后...... console; _thiscity2isShow = false; _thisyouChoiceCityName2 = '你选的城市是:' + rescityName; } } methods: { thiscitystarCity = cityId: 301 cityName: "保山" citySpell: "BAOSHAN" cityFirstLetter: "B" cityId: 167 cityName: "日照" citySpell: "RIZHAO" cityFirstLetter: "R" thiscitycityData = cityId: 290 cityName: "阿坝州" citySpell: "ABAZHOU" cityFirstLetter: "A" cityId: 348 cityName: "阿克苏地区" citySpell: "AKESUDIQU" cityFirstLetter: "A" cityId: 348 cityName: "阿克苏地区" citySpell: "AKESUDIQU" cityFirstLetter: "A" ; thiscitylocalCity = cityId: 301 cityName: "保山" citySpell: "BAOSHAN" cityFirstLetter: "B" thiscity2cityData = cityId: 290 cityName: "阿坝州" cityId: 290 cityName: "阿坝州2" } { thiscityisShow = true; } { thiscity2isShow = true; } { thiscityisShow = false; thiscity2isShow = 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数据格式:
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"
版本升级
0.2.0
- 基本功能实现
1.0.0
- vue1.x 版
2.0.0
- vue2.x 版