uniapp官方组件picker
uniapp使用三级联动picker，官方文档省市区选择器不适用5+app、h5和支付宝小程序，必须适用插件（日期、时间、三级联动picker）（mpvue-picker）
日期、时间、三级联动picker这个插件有个注意的事项，用HBuilderX导入插件的时候，会覆盖掉page/index/index.vue这个文件，需要注意。
日期、时间、三级联动picker插件要使插件显示，在元素上做一个点击方法click(){this.KaTeX parse error: Expected 'EOF', got '}' at position 20: ….picker.show();}̲,插件的作者用this.refs.picker.show();显示插件，但是适用的时候，会报错，可能是我自己的原因，我并没有按照他的代码来写，我只需要三级联动，后面改成this.$refs.region.show();就可以适用了。
上一下代码，除三级联动，其他picker都是适用官方文档。

<template>
	<view class="back">
		<view class="bottom">
			<form action="">
				<view class="form">
					<!-- 头像 -->
					<view class="touxiang">
						<text class="itemtitle">头像</text>
						<image class="huiyuanimg" src="" mode="widthFix"></image>
					</view>
					<!-- 昵称 -->
					<view class="form-item">
						<text class="itemtitle">昵称</text>
						<input type="text" value="" class="input" maxlength="140" />
					</view>
					<!-- 性别 -->
					<view class="form-item">
						<text class="itemtitle">性别</text>
						<picker mode="selector" :range="gender" @change="bindSexChange">
							<view class="picker">
								{{gender[uploadInfo.gender]}}
								<image class="xaiicon" src="../../../static/my/righticon.png" mode="widthFix"></image>
							</view>
						</picker>
					</view>
					<!-- 出生日期 -->
					<view class="form-item form-item-bottom">
						<text class="itemtitle">出生日期</text>
						<picker mode="date" @change="bindBirthdayChange">
							<view class="picker">
								{{uploadInfo.birthday}}
								<image class="xaiicon" src="../../../static/my/righticon.png" mode="widthFix"></image>
							</view>
						</picker>
					</view>
					<view class="datedirsday"></view>
					<!-- 联系方式 -->
					<view class="form-item">
						<text class="itemtitle">联系方式</text>
						<input class="input" type="number" value="" maxlength="11" />
					</view>
					<!-- 年级 -->
					<view class="form-item">
						<text class="itemtitle">年级</text>
						<picker mode="selector" :range="array" @change="bindClassChange">
							<view class="picker">
								{{array[uploadInfo.grade]}}
								<image class="xaiicon" src="../../../static/my/righticon.png" mode="widthFix"></image>
							</view>
						</picker>
					</view>
					<!-- 地区 -->
					<view class="form-item">
						<text class="itemtitle">地区</text>
						<view class="pickerpicker" @click="toggleTab">
							<view class="picker">
								<text v-if="uploadInfo.region.length==0"></text>
								<text v-else>
									{{uploadInfo.region[0]}}，{{uploadInfo.region[1]}}，{{uploadInfo.region[2]}}
								</text>
								<image class="xaiicon" src="../../../static/my/righticon.png" mode="widthFix"></image>
							</view>
						</view>
						<w-picker mode="region"  @confirm="bindCityChange" ref="region"></w-picker>
					</view>
					<!-- 保存 -->
					<view class="lijishengji">
						<button type="primary" class="sengjibtn" v-on:click="sengjibtn">保存</button>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				gender: ['男', '女'],
				array: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
				uploadInfo: {
					nickname: '', //昵称
					avatar: '',
					gender: '', //性别
					birthday: '', //生日
					mobile: '', //手机
					grade: '', //年级
					province: '', //省份
					city: '', //城市
					area: '', //地区
					region: []
				}
			}
		},
		onLoad() {

		},
		methods: {
			//性别选择点击
			bindSexChange(e) {
				this.uploadInfo.gender = e.target.value;
			},
			//生日选择点击
			bindBirthdayChange(e) {
				this.uploadInfo.birthday = e.target.value;
			},
			//年级选择点击
			bindClassChange(e) {
				this.uploadInfo.grade = e.target.value;
			},
			//地区点击出现选项
			toggleTab() {
				this.$refs.region.show();
			},
			//地区选择点击
			bindCityChange(e) {
				this.uploadInfo.region=e.checkArr;
			},
			//保存点击
			sengjibtn(){
				console.log(1);
			}
		},
		mounted() {

		}
	}
</script>

<style>
	@import "./huiyuanxinxi.css";
</style>

mpvue-picker这个会比较简单，根据作者提供的进行编写。
mpvue-picker选择地区获取的省市区为字符串，而第一个为数组，个人觉得数组会比较方便一个，因为保存的时候还要把省市区存入数据库的。
以上仅是个人学习工作所理解的。

最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！