【uView 1.x】中国省市县/区 地区选择器picker【亲测可用】

如果你还没安装uView,请先安装uView

注意:这是uView1.x Picker选择器的用法,uView2.x Picker选择器中没有mode属性

效果图:

【uView 1.x】中国省市县/区 地区选择器picker【亲测可用】_第1张图片

把u-picker的mode设置为region地区模式,然后展示在u-input中。

由于uview中自带城市数据包,所以只要把u-picker的mode设置为region模式就已经有数据了。


	
		
		
	

【uView 1.x】中国省市县/区 地区选择器picker【亲测可用】_第2张图片  

data() {
	return {
		form: {
			province: '',
			city: '',
			county: '',
			area:'',
		},
		rules: {
			area: [
				{ 
					required: true, 
					message: '请选择所在地区', 
					trigger: 'blur',
				}
			],

		},
		show: false,
		
	}
},
// 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
onReady() {
	this.$refs.uForm.setRules(this.rules);
},
methods: {
	change () {
		this.show = true
	},
 
	confirm (e) {
		this.form.province = e.province.label
		this.form.city = e.city.label
		this.form.county = e.area.label
		// 省市区拼接
		this.form.area = e.province.label + e.city.label + e.area.label
		console.log("全部===>",this.form.area)
		console.log("省===>",this.form.province)
		console.log("市===>",this.form.city)
		console.log("县===>",this.form.county)
	},
	
}

你可能感兴趣的:(微信小程序,javascript,前端,微信小程序,uni-app)