此组件为 e6city 组件，基于vue封装的城市选择组件，目前已上传npm和git，可直接安装/下载使用。 如有bug和其他需求，请联系作者进行扩展和修改。

1.安装

npm i e6city

2.用法

main.js 中进行导入和使用：

import E6City from 'e6city'  
Vue.use(E6City);  

对应页面模板中使用：

import E6City from 'e6city'  

<script>
export default {
    components:{
        E6City
    }
}
</script>

<e6-city
    :format="['常用','市']"
    :common="common"
    :placeholder="'请选择'"
    :bin="bin"
    :label="label"
    @selected="citySelect"
  ></e6-city>

3.类型

• 支持省市区三级联动

• 支持扩展“常用”地址选择【自定义数据】

• 支持只选择省

• 支持只选择到市

• 支持没有省市区，只有常用地址选择

4.配置

| 参数 | 类型 | 是否必须 | 默认值 | 说明 | | :-----------: | :------: | :------: | -------------------- | :----------------------------------------------------------: | | format | Array | 否 | ["省", "市", "区县"] | 数据类型支持['常用','省','市','区县']四种：["区县"]则为有区县选项，["市"]，无区县选项，["省"]，只有省选项 | | common | Object | 否 | {} | {data:[{bin:1,name:'西安市雁塔区'},{bin:2,name:'深圳市南山区'}],link:{url:'http://www.e6yun.com',label:'添加'} | | placeholder | String | 否 | '' | 默认展示 | | bin | Number | 否 | 0 | 默认选中城市bin（例：修改页面进入） | | label | String | 否 | '' | 默认显示地址 | | v-on:selected | Function | 否 | undefined | 组件中选中的结果通知父组件的回调方法，常用按照传入对象进行返回，省市区选择返回省市区的bin和name对象 |

format：

默认：["省", "市", "区县"]

1、需扩展常用选项，则：['常用', '市']，在最前面扩展，但必须是'常用'；

2、选择到区县，则['区县']，选择到市，则['市']，只选择到省，则['省']即可；

common:

data为需要显示的常用备选项数组

link为一个添加备选项的链接地址，会显示一个按钮，点击后跳转链接，如果传''则无按钮

{
    data:[
        {
            bin:1,
            name:'西安市雁塔区'
        },
        {
            bin:2,
            name:'深圳市南山区'
        }
    ],
    link:{
        url:'http://www.baidu.com',
        label:'添加'
    }
}

5.回调函数

a.选中回调

v-on:selected="citySelect"
// 传入方法名，在选中时自动回调
citySelect(val){
	console.log(val);
    // 常用选择 {bin:123,name:'北京市'...} --返回给定的初始元数据
    // 城市 
    {
        bin: 3541030, // 如果只选择到省，则此处和省的数据一致，如到市，则和市的一致，到区县则和区县一直
        name: "江西省吉安市泰和县",
        province:{
            bin: 3538944,
            level: "5",
            latlng: "28.66246*[email protected]*115.911714",
            name: "江西省"
        },
        city:{
            bin: 3540992,
            level: "8",
            latlng: "27.11408*[email protected]*114.980169",
            name: "吉安市"
        },
        district:{
            bin: 3541030,
            level: "",
            latlng: "",
            name: "泰和县"
        }
    }
    
}