uni-app中的城市三级联动

Posted 2021-06-27 2019ab

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