2.0.0 • Published 9 years ago
vue-city v2.0.0
城市选择器
展示
安装
vue1.x 版
npm install vue-city@1.0.0vue2.x 版npm install vue-city@2.0.0
使用DEMO
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;
}
}
}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 版