使用方法：
创建一个带有uni-app框架组件模板的项目，找到里面的mpvue-citypicker文件夹，复制到所需项目中


代码：

<template>
	<view class="my-add-path">
		<view class="path-item">
			<view class="">收件人</view>
			<input type="text" value="" placeholder="收件人姓名" />
		</view>
		<view class="path-item">
			<view class="">手机号</view>
			<input type="text" value="" placeholder="11位手机号" />
		</view>
		<view class="path-item">
			<view class="">所在地区</view>
			<view @tap="showPicker">{{cityName}} > </view>
			 <mpvue-picker ref="mpvuePicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm" ></mpvue-picker>
		</view>
		<view class="path-item">
			<view class="">详细地址</view>
			<input type="text" value="" placeholder="5-60个字符" />
		</view>
		<view class="path-item">
			<view class="">设为默认</view>
			<label class="radio">
				<radio value="" color="#FF3333" /><text></text>
			</label>
		</view>
	</view>
</template>

<script>
	import mpvuePicker from '@/components/uni/mpvue-citypicker/mpvueCityPicker.vue';
	export default {
		data() {
			return {
				cityName:'请选择',
				pickerValueDefault: [0,0,1]
			}
		},
		components:{
			mpvuePicker
		},
		methods: {
			showPicker() {
			  this.$refs.mpvuePicker.show();
			},
			onConfirm(e) {
			    this.cityName = e.label;
			}
		}
	}
</script>

<style scoped>
	.my-add-path {
		padding-left: 20rpx;
	}
	.path-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;
		width: 100%;
		border-bottom: 1px solid #ccc;
	}
	.path-item input {
		flex: 1;
		text-align: left;
		padding-left: 10rpx;
	}
</style>

参考链接：https://github.com/MPComponent/mpvue-picker