README

此组件为 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*115.91655@28.665835*115.911714",
            name: "江西省"
        },
        city:{
            bin: 3540992,
            level: "8",
            latlng: "27.11408*114.98511@27.117469*114.980169",
            name: "吉安市"
        },
        district:{
            bin: 3541030,
            level: "",
            latlng: "",
            name: "泰和县"
        }
    }
    
}

Usage no npm install needed!