## **area移动端省市区联动组件**
1.初始化省市区，随着滚动选中相应的省、市、区，其相应的下一级的联动数据变化
#### **基本用法**
~~~
<div @touchstart="showPicker">{{address}}</div>
<abc-area
v-if="dataArea.length > 0"
:show.sync="show"
:dataArea="dataArea"
@confirm="confirm"
@cancel="cancel"
:column="column"
:defaultLocation="defaultLocation"
>
</abc-area>
~~~
#### **data数据说明：**
```js
export default {
data() {
return {
show: false, //是否显示省市区
column: 3, //省市区显示级数1：定位到省 2：定位到市 3：定位到区
/*
初始化省市区 其字符串长度与column中的统一，其id属性值的字符串分别代表省、市 、区的id号，用空格区分
eg: 若column是2， 其defaultLocation为
defaultLocation: {
id:"120000 120100",
name:"天津市 市辖区"
}
以此形式类推......
*/
defaultLocation: {
id:"120000 120100 120101",
name:"天津市 市辖区 和平区"
},
address: 'test',
ifShow: false,
dataArea: []
}
},
methods: {
showPicker() {
this.show = true
},
confirm(obj) {
console.log('com---->', obj)
},
cancel(obj) {
console.log('can---->', obj)
}
},
created() {
this.dataArea = [
{
"name": "广东省",
"id": "440000",
"child": [ { "name": "深圳市", "child": [ { "id": "440301", "name": "市辖区" }, { "id": "440303", "name": "罗湖区" }, { "id": "440304", "name": "福田区" }, { "id": "440305", "name": "南山区" }, { "id": "440306", "name": "宝安区" }, { "id": "440307", "name": "龙岗区" }, { "id": "440308", "name": "盐田区" } ], "id": "440300" }, { "name": "广州市", "child": [ { "id": "440103", "name": "荔湾区" }, { "id": "440104", "name": "越秀区" }, { "id": "440105", "name": "海珠区" }, { "id": "440106", "name": "天河区" }, { "id": "440111", "name": "白云区" }, { "id": "440112", "name": "黄埔区" }, { "id": "440113", "name": "番禺区" }, { "id": "440114", "name": "花都区" }, { "id": "440115", "name": "南沙区" }, { "id": "440116", "name": "萝岗区" }, { "id": "440183", "name": "增城市" }, { "id": "440184", "name": "从化市" }, { "id": "440101", "name": "市辖区" }, { "id": "440117", "name": "从化区" }, { "id": "440118", "name": "增城区" } ], "id": "440100" }, { "name": "韶关市", "child": [ { "id": "440201", "name": "市辖区" }, { "id": "440203", "name": "武江区" }, { "id": "440204", "name": "浈江区" }, { "id": "440222", "name": "始兴县" }, { "id": "440224", "name": "仁化县" }, { "id": "440229", "name": "翁源县" }, { "id": "440232", "name": "乳源瑶族自治县" }, { "id": "440233", "name": "新丰县" }, { "id": "440281", "name": "乐昌市" }, { "id": "440282", "name": "南雄市" }, { "id": "440221", "name": "曲江县" }, { "id": "440205", "name": "曲江区" } ], "id": "440200" }, { "name": "珠海市", "child": [ { "id": "440401", "name": "市辖区" }, { "id": "440402", "name": "香洲区" }, { "id": "440403", "name": "斗门区" }, { "id": "440404", "name": "金湾区" } ], "id": "440400" }, { "name": "汕头市", "child": [ { "id": "440501", "name": "市辖区" }, { "id": "440507", "name": "龙湖区" }, { "id": "440511", "name": "金平区" }, { "id": "440512", "name": "濠江区" }, { "id": "440513", "name": "潮阳区" }, { "id": "440514", "name": "潮南区" }, { "id": "440515", "name": "澄海区" }, { "id": "440523", "name": "南澳县" } ], "id": "440500" }, { "name": "佛山市", "child": [ { "id": "440601", "name": "市辖区" }, { "id": "440604", "name": "禅城区" }, { "id": "440605", "name": "南海区" }, { "id": "440606", "name": "顺德区" }, { "id": "440607", "name": "三水区" }, { "id": "440608", "name": "高明区" } ], "id": "440600" }, { "name": "江门市", "child": [ { "id": "440701", "name": "市辖区" }, { "id": "440703", "name": "蓬江区" }, { "id": "440704", "name": "江海区" }, { "id": "440705", "name": "新会区" }, { "id": "440781", "name": "台山市" }, { "id": "440783", "name": "开平市" }, { "id": "440784", "name": "鹤山市" }, { "id": "440785", "name": "恩平市" } ], "id": "440700" }, { "name": "湛江市", "child": [ { "id": "440801", "name": "市辖区" }, { "id": "440802", "name": "赤坎区" }, { "id": "440803", "name": "霞山区" }, { "id": "440804", "name": "坡头区" }, { "id": "440811", "name": "麻章区" }, { "id": "440823", "name": "遂溪县" }, { "id": "440825", "name": "徐闻县" }, { "id": "440881", "name": "廉江市" }, { "id": "440882", "name": "雷州市" }, { "id": "440883", "name": "吴川市" } ], "id": "440800" }, { "name": "茂名市", "child": [ { "id": "440901", "name": "市辖区" }, { "id": "440902", "name": "茂南区" }, { "id": "440903", "name": "茂港区" }, { "id": "440923", "name": "电白县" }, { "id": "440981", "name": "高州市" }, { "id": "440982", "name": "化州市" }, { "id": "440983", "name": "信宜市" }, { "id": "440904", "name": "电白区" } ], "id": "440900" }, { "name": "惠州市", "child": [ { "id": "441301", "name": "市辖区" }, { "id": "441302", "name": "惠城区" }, { "id": "441303", "name": "惠阳区" }, { "id": "441322", "name": "博罗县" }, { "id": "441323", "name": "惠东县" }, { "id": "441324", "name": "龙门县" } ], "id": "441300" }, { "name": "梅州市", "child": [ { "id": "441401", "name": "市辖区" }, { "id": "441402", "name": "梅江区" }, { "id": "441421", "name": "梅县" }, { "id": "441422", "name": "大埔县" }, { "id": "441423", "name": "丰顺县" }, { "id": "441424", "name": "五华县" }, { "id": "441425", "name": "兴宁市" }, { "id": "441426", "name": "平远县" }, { "id": "441427", "name": "蕉岭县" }, { "id": "441403", "name": "梅县区" }, { "id": "441481", "name": "兴宁市" } ], "id": "441400" }, { "name": "汕尾市", "child": [ { "id": "441501", "name": "市辖区" }, { "id": "441502", "name": "城区" }, { "id": "441521", "name": "海丰县" }, { "id": "441523", "name": "陆河县" }, { "id": "441581", "name": "陆丰市" } ], "id": "441500" }, { "name": "河源市", "child": [ { "id": "441601", "name": "市辖区" }, { "id": "441602", "name": "源城区" }, { "id": "441621", "name": "紫金县" }, { "id": "441622", "name": "龙川县" }, { "id": "441623", "name": "连平县" }, { "id": "441624", "name": "和平县" }, { "id": "441625", "name": "东源县" } ], "id": "441600" }, { "name": "阳江市", "child": [ { "id": "441701", "name": "市辖区" }, { "id": "441702", "name": "江城区" }, { "id": "441721", "name": "阳西县" }, { "id": "441723", "name": "阳东县" }, { "id": "441733", "name": "海陵区" }, { "id": "441781", "name": "阳春市" }, { "id": "441704", "name": "阳东区" } ], "id": "441700" }, { "name": "清远市", "child": [ { "id": "441801", "name": "市辖区" }, { "id": "441802", "name": "清城区" }, { "id": "441821", "name": "佛冈县" }, { "id": "441823", "name": "阳山县" }, { "id": "441825", "name": "连山壮族瑶族自治县" }, { "id": "441826", "name": "连南瑶族自治县" }, { "id": "441827", "name": "清新县" }, { "id": "441881", "name": "英德市" }, { "id": "441882", "name": "连州市" }, { "id": "441803", "name": "清新区" } ], "id": "441800" }, { "name": "东莞市", "id": "441900" }, { "name": "中山市", "child": [ { "id": "442001", "name": "市辖区" } ], "id": "442000" }, { "name": "肇庆市", "child": [ { "id": "442801", "name": "高要市" }, { "id": "442802", "name": "四会市" }, { "id": "442803", "name": "广宁县" }, { "id": "442804", "name": "怀集县" }, { "id": "442805", "name": "封开县" }, { "id": "442806", "name": "德庆县" }, { "id": "442807", "name": "端州区" }, { "id": "442808", "name": "鼎湖区" }, { "id": "442809", "name": "市辖区" } ], "id": "442800" }, { "name": "潮州市", "child": [ { "id": "445101", "name": "市辖区" }, { "id": "445102", "name": "湘桥区" }, { "id": "445121", "name": "潮安县" }, { "id": "445122", "name": "饶平县" }, { "id": "445103", "name": "潮安区" } ], "id": "445100" }, { "name": "揭阳市", "child": [ { "id": "445201", "name": "市辖区" }, { "id": "445202", "name": "榕城区" }, { "id": "445221", "name": "揭东县" }, { "id": "445222", "name": "揭西县" }, { "id": "445224", "name": "惠来县" }, { "id": "445281", "name": "普宁市" }, { "id": "445203", "name": "揭东区" } ], "id": "445200" }, { "name": "云浮市", "child": [ { "id": "445301", "name": "市辖区" }, { "id": "445302", "name": "云城区" }, { "id": "445321", "name": "新兴县" }, { "id": "445322", "name": "郁南县" }, { "id": "445323", "name": "云安县" }, { "id": "445381", "name": "罗定市" }, { "id": "445303", "name": "云安区" } ], "id": "445300" }, { "name": "肇庆市", "child": [ { "id": "441201", "name": "市辖区" }, { "id": "441202", "name": "端州区" }, { "id": "441203", "name": "鼎湖区" }, { "id": "441204", "name": "高要区" }, { "id": "441223", "name": "广宁县" }, { "id": "441224", "name": "怀集县" }, { "id": "441225", "name": "封开县" }, { "id": "441226", "name": "德庆县" }, { "id": "441284", "name": "四会市" } ], "id": "441200" } ]
},
{
"name": "北京市",
"id": "110000",
"child": [ { "name": "市辖区", "child": [ { "id": "110101", "name": "东城区" }, { "id": "110102", "name": "西城区" }, { "id": "110103", "name": "崇文区" }, { "id": "110104", "name": "宣武区" }, { "id": "110105", "name": "朝阳区" }, { "id": "110106", "name": "丰台区" }, { "id": "110107", "name": "石景山区" }, { "id": "110108", "name": "海淀区" }, { "id": "110109", "name": "门头沟区" }, { "id": "110111", "name": "房山区" }, { "id": "110112", "name": "通州区" }, { "id": "110113", "name": "顺义区" }, { "id": "110114", "name": "昌平区" }, { "id": "110115", "name": "大兴区" }, { "id": "110116", "name": "怀柔区" }, { "id": "110117", "name": "平谷区" } ], "id": "110100" }, { "name": "县", "child": [ { "id": "110228", "name": "密云县" }, { "id": "110229", "name": "延庆县" } ], "id": "110200" } ]
},
{
"name": "天津市",
"id": "120000",
"child": [ { "name": "市辖区", "child": [ { "id": "120101", "name": "和平区" }, { "id": "120102", "name": "河东区" }, { "id": "120103", "name": "河西区" }, { "id": "120104", "name": "南开区" }, { "id": "120105", "name": "河北区" }, { "id": "120106", "name": "红桥区" }, { "id": "120107", "name": "塘沽区" }, { "id": "120108", "name": "汉沽区" }, { "id": "120109", "name": "大港区" }, { "id": "120110", "name": "东丽区" }, { "id": "120111", "name": "西青区" }, { "id": "120112", "name": "津南区" }, { "id": "120113", "name": "北辰区" }, { "id": "120114", "name": "武清区" }, { "id": "120115", "name": "宝坻区" }, { "id": "120116", "name": "滨海新区" } ], "id": "120100" }, { "name": "县", "child": [ { "id": "120221", "name": "宁河县" }, { "id": "120223", "name": "静海县" }, { "id": "120225", "name": "蓟县" } ], "id": "120200" } ]
}
]
}
}
```
#### **Props：**
| 参数 | 说明 | 类型 | 默认值 | 是否必传 |
| --- | --- | --- | --- | --- |
| show | 是否显示省市区联动列表 | Boolean | false | 否 |
| column | 省市区联动级数 1：省 2： 省市 3： 省市区 | Number | 3 | 否 |
| defaultLocation | 默认需要初始化的省市区对象 | Object | — | 否 |
| dataArea | 相关省市区的数组 | Array | — | 是 |
#### **事件：**
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| confirm | 点击确定后的回调事件 | 选中的省市区对象 |
| cancel | 点击取消后的回调事件 | 选中的省市区对象 |
