udemo-address/uni_modules/vrapile-address

引用样例

<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>

功能说明

• 入参 region ：必传，没有初始值传提示语，有初始值传初始值

    如：
	region1: "请点击选择地区",
	region2: "湖北省,武汉市,江汉区"

• 回调函数 adress-change ：地址选择完成触发，内容是Json数据体

	index: 索引列表, region: 区域列表

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

演示说明

以下所有工程共用一个后端，账号互通 （ 皆可用访客账号/密码：visitor/visitor ）

演示Demo： https://www.ninecloud.top/udemo/address/index.html

演示H5：云山有果