效果

效果图

介绍：

vue + element-ui (el-select+el-option)的地区选择组件
实现了：省+市+区

说明：

目前为1.0.0版
后期会考虑单独实现select和增加form表单的校验，各ui组件能通过校验

使用

引入

// es6
// 全局
// main.js
import {myDistrict} from 'my-district'
Vue.use(myDistrict)
// 局部
// xxx.vue
<script>
import {myDistrict} from 'my-district'
export default {
    components: {
         myDistrict
     }
}
</script>

使用

<template>
      <myDistrict
        :province.sync="province"
        :city.sync="city"
        :area.sync="area"
      ></myDistrict>
</template>

参数说明
myDistrict Attributes

参数	说明	类型	可选值	默认值
province	省	string	--	--
city	省	string	--	--
area	省	string	--	--
layoutLevels	显示级别 1省2市3区 1 2 3 自由组合，但前面的值必须提供	array	1,2,3 构成的数组	[1,2,3]
uint	样式长度单位	string	px,%等	px
size	element组件的size	string	mini,small,medium	--
selectWidth	select组件的宽度	number	--	200
spaceWidth	两个select的间隙	number	--	24

其他使用可与调取内置函数

名称	说明	参数用法
provinceArr	省列表	--
getCitys	获取市列表，提供省中文名	getCitys('浙江省')
getArea	获取区县列表，提供省市中文名	getAreas('浙江省', '杭州市')

import { getAreas, getCitys, provinceArr } from 'my-district'

question:

数据不对怎么办？
可以更改china.json文件,可以删改某项。

...
        "name": "天津市",
        "child": [
            {
                "name": "天津市",
                "child": [
                    {"value":"和平区"},
                    {"value":"河东区"},
                    {"value":"河西区"},
                    {"value":"南开区"},
                    {"value":"河北区"},
                    {"value":"红桥区"},
                    {"value":"东丽区"},
                    {"value":"西青区"},
                    {"value":"津南区"},
                    {"value":"北辰区"},
                    {"value":"武清区"},
                    {"value":"宝坻区"},
                    {"value":"滨海新区"},
                    {"value":"宁河县"},
                    {"value":"静海县"},
                    {"value":"蓟州县"},
                    {"value":"xxx"} // 你需要增加的
                ]
            }
      ...

执行npm run make:area-json

2.其他问题可以提issue

huoguozhang
3.感谢

Orionwl和CutiePanther整理的地区json文件