/vue-city

a vue component that show city infomation

Primary LanguageVue

城市选择器

> 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方式

	<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 版