第一步，我们在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() } },
