uni-app中使用picker实现省市区三级地址联动

最新推荐文章于 2024-05-27 16:57:50 发布

Simaoya

最新推荐文章于 2024-05-27 16:57:50 发布

阅读量633

点赞数 1

分类专栏：小程序文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/Anlittlecat/article/details/136882939

版权

小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在uni-app中使用picker组件创建省市区三级联动功能，展示了JavaScript导入picker-region.js文件并配置数据的过程，以实现用户地址输入的便捷性。

摘要由CSDN通过智能技术生成

uni-app中使用picker实现省市区三级地址联动

//view中
					<view class="input flex-fill" >
						<picker mode="region" @change="bindPickerChange" :range="items">
							<text>🔍快捷填入</text>
						</picker>
						<input type="text" v-model="userInfoForm.address" maxlength="30" placeholder="比如: 2区15舍309"   placeholder-class="text-color-assist font-size-base" >
					</view>

js组件导入与使用
import address from"@/common/picker-region.js";

data() {
			return {
				userInfoForm: {
					name: '',
					phone: '',
					address: '',
					sex: 1,
				},
				items:[]
			}
			},

onLoad() {
			this.items = address
		},

methods: {
			bindPickerChange(e){
				// console.log(e.target.value);
				this.userInfoForm.address = e.target.value.join('') 
				},
			}

picker-region.js部分内容展示

const address  = 
	[
		{
        text: "北京市",
        value: "110000000000",
        children: [{
            text: "市辖区",
            value: "110100000000",
            children: [{
                    text: "东城区",
                    value: "110101000000"
                },
                {
                    text: "西城区",
                    value: "110102000000"
                },
                {
                    text: "朝阳区",
                    value: "110105000000"
                },
                {
                    text: "丰台区",
                    value: "110106000000"
                },
                {
                    text: "石景山区",
                    value: "110107000000"
                },
                {
                    text: "海淀区",
                    value: "110108000000"
                },
                {
                    text: "门头沟区",
                    value: "110109000000"
                },
                {
                    text: "房山区",
                    value: "110111000000"
                },
                {
                    text: "通州区",
                    value: "110112000000"
                },
                {
                    text: "顺义区",
                    value: "110113000000"
                },
                {
                    text: "昌平区",
                    value: "110114000000"
                },
                {
                    text: "大兴区",
                    value: "110115000000"
                },
                {
                    text: "怀柔区",
                    value: "110116000000"
                },
                {
                    text: "平谷区",
                    value: "110117000000"
                },
                {
                    text: "密云区",
                    value: "110118000000"
                },
                {
                    text: "延庆区",
                    value: "110119000000"
                }
            ]
        }]
    },
    ...]
    export default address;