uni-app中的省市区选择组件

找到省市区选择组件的资源包

因为uni-app中不支持npm安装后直接导入，所以我们必须先找到这个组件

1. uni-app中提供了这个组件资源，我们打开Hbuilder，新建一个uni-app的模板项目，如下：

2. 创建完成后找到这个组件，如下：

3. 将其复制到自己的uni-app项目中

配置

可参考：https://github.com/MPComponent/mpvue-citypicker

我的配置（仅供参考）

<template>
	<view class="">
		<input type="text" v-model="city" style="border: 1px solid black;">
		<button @tap="showCityPicker">选择城市</button>
		<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onChange="onChange"
			@onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

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