vue-city
v2.0.0
Published
城市选择器
Downloads
12
Readme
城市选择器
展示
安装
vue1.x 版
npm install [email protected]
vue2.x 版npm install [email protected]
使用DEMO
git clone .......
cd vue-city
npm install
npm run dev
ES6方式
<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 版