uni-app中的城市三级联动

第一步，我们在uniapp中引入插件

import mpvueCityPicker from '@/components/uni-ui/mpvue-citypicker/mpvueCityPicker.vue';

第二步，注册插件

components:{
      mpvueCityPicker,
    },

第三步，将view中的标签写入

<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefult" @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>

第四步，将所需要的的变量写在data中

data() {
      return {
        themeColor:'#007AFF',
        cityPickerValueDefult:[0,0,1],
        pickerText:'',
                
      }
    },

第五步，将绑定的事件写上

// 三级联动提交
      onConfirm(e){
        this.pickerText = e.label;
      },

第六步，将开关绑定到需要的组件上

<uni-list-item title="家乡" :rightText="pickerText" @click="showCityPicker"></uni-list-item>

第七步：来吧，展示（绑定事件展示组件）

showCityPicker(){
        this.$refs.mpvueCityPicker.show();
      },

第八步：关闭或者返回的时候卸载组件

// 监听返回
    onBackPress() {
      if(this.$refs.mpvueCityPicker.showPicker){
        this.$refs.mpvueCityPicker.pickerCancel();
        return true;
      }
    },// 监听页面卸载
    onUnload() {
      if(this.$refs.mpvueCityPicker.showPicker){
        this.$refs.mpvueCityPicker.pickerCancel()
      }
      if(this.$refs.mpvueCityPicker.showPicker){
        this.$refs.mpvueCityPicker.pickerCancel()
      }
    },