vue之城市选择

安装
vue1.x 版 npm install [email protected]

vue2.x 版 npm install [email protected]

使用DEMO
git clone …
cd vue-city
npm install
npm run dev
ES6方式

	
{{youChoiceCityName}}
    
{{youChoiceCityName2}}
    

        
        
    

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",
    }
]