## 引用样例


``` javascript
<template>
	<view class="vrapile-content-001">
		<view class="vrapile-list-001">
			<view class="vrapile-list-001-item">
				<span class="vrapile-item-span">
					<span class="vrapile-item-span-line"></span>
					选择地区
				</span>
				<vrapile-address class="vrapile-item-address-picker" 
					:region="region1" @adress-change="addressChange1">
					{{region1.replace(/,/g, '-')}}
				</vrapile-address>
			</view>
			<view class="vrapile-list-001-item">
				<span class="vrapile-item-span">
					<span class="vrapile-item-span-line"></span>
					选择地区
				</span>
				<vrapile-address class="vrapile-item-address-picker" 
					:region="region2" @adress-change="addressChange2">
					{{region2.replace(/,/g, ' ')}}
				</vrapile-address>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			region1: "请点击选择地区",
			region2: "湖北省,武汉市,江汉区"
		}
	},
	methods: {
		addressChange1(data) {
			this.region1 = data.region.join(',')
		},
		addressChange2(data) {
			this.region2 = data.region.join(',')
		}
	}
}
</script>

<style lang="scss" scoped>
	.vrapile-content-001{
		padding: 0;
		margin: 0;
		width: 750rpx;
		height: calc(100vh - 0px);
		background-color: #f1f1f1;
		display: flex;
		flex-direction: column;
	}
	.vrapile-list-001{
		padding: 10rpx;
	}
	.vrapile-list-001-item{
		background-color: #fff;
		margin: 10rpx 0;
		padding: 20rpx;
		border-radius: 10rpx;
		display: flex;
	}
	.vrapile-item-span{
		display: flex;
		align-items: center;
		width: 200rpx;
	}
	.vrapile-item-span-line{
		display: block;
		width: 5rpx;
		height: 25rpx;
		margin-right: 10rpx;
		border-radius: 5rpx;
		background-color: #2979ff;
	}
	.vrapile-item-address-picker{
		flex: 1;
	}
</style>
```
<br >


## 功能说明


* 入参 *region* ：必传，没有初始值传提示语，有初始值传初始值
``` javascript
    如：
	region1: "请点击选择地区",
	region2: "湖北省,武汉市,江汉区"
```

* 回调函数 *adress-change* ：地址选择完成触发，内容是Json数据体
``` javascript
	index: 索引列表, region: 区域列表

	完整Json样例：
	{"index": [16, 0, 2], "region": ["湖北省", "武汉市", "江汉区"]}
```
<br >

## 演示说明
以下所有工程共用一个后端，账号互通
<font color="gray">（ *皆可用访客账号/密码：visitor/visitor* ）</font>

演示Demo：
<a href="https://www.ninecloud.top/udemo/address/index.html" target="_blank">https://www.ninecloud.top/udemo/address/index.html</a>

演示H5：<font color="gray">*云山有果*</font>

<img src="https://fs.ninecloud.top/uniapp/ufruit/qrcode.png" width="300">