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>