uniapp-省市区地区选择器

本文介绍如何在uniapp中创建一个省市区选择器组件,解决了网上组件存在的地址匹配问题。提供了数据源data.js的链接以及pickerAddress.vue组件的使用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

uniapp-地区选择器

之前在网上借鉴其他大佬的组件,用的时候发现点问题,地址对不上,后面又重新搞了个文件,做了点改动

效果图如下:

在这里插入图片描述

data.js
链接: https://pan.baidu.com/s/1FlN7qHiiL_NFU94f9nnIYg. 提取码: 95sh

pickerAddress.vue

<template>
	<picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value" mode="multiSelector" style="display:flex;justify-content: space-between;">
		<slot></slot>
	</picker>
</template>

<script>
	import AllAddress from './data.js'
	let selectVal = ['','','']
	
	export default {
   
   
		data() {
   
   
			return{
   
   
				value: [0,0,0],
				array: [],
				index: 0
			}
		},
		created() {
   
   
			this.initSelect(
### 使用 UniApp 和 Vue3 实现省市区三级联动选择器 以下是一个完整的示例,展示如何在 UniApp 中使用 `u-picker` 组件实现省市区三级联动选择器--- ### 1. **引入依赖** 首先需要确保已经安装了 `uView` 的最新版(适用于 Vue3)。如果尚未安装,可以通过 npm 安装: ```bash npm install uview-ui --save ``` 接着,在项目的入口文件中注册 `uView`: ```javascript // main.js import uView from 'uview-ui'; import 'uview-ui/theme.scss'; Vue.use(uView); ``` --- ### 2. **准备地区数据** 创建一个 JSON 文件存储省市区数据。例如,保存为 `src/utils/area.js`: ```json [ { "label": "北京市", "value": "110000", "children": [ { "label": "北京市", "value": "110100", "children": [ {"label": "东城区", "value": "110101"}, {"label": "西城区", "value": "110102"} ] } ] }, { "label": "上海市", "value": "310000", "children": [ { "label": "上海市", "value": "310100", "children": [ {"label": "黄浦区", "value": "310101"}, {"label": "徐汇区", "value": "310104"} ] } ] } ] ``` --- ### 3. **页面代码实现** 以下是完整的页面代码: ```html <template> <view class="content"> <!-- 显示当前选中的地址 --> <text>{{ selectedAddress || '请选择所在地区' }}</text> <!-- 打开选择器的按钮 --> <button type="primary" @click="openPicker">选择地区</button> <!-- u-picker 组件 --> <u-picker mode="region" v-model="showPicker" :default-region="['110000', '110100', '110101']" @confirm="onConfirm" @cancel="onCancel" /> </view> </template> <script> export default { data() { return { showPicker: false, // 控制选择器显隐状态 selectedAddress: '', // 存储用户选择地址 }; }, methods: { openPicker() { this.showPicker = true; // 打开选择器 }, onConfirm(e) { const { province, city, area } = e; // 解构获取省份、城市、区域信息 this.selectedAddress = `${province.label} ${city.label} ${area.label}`; // 拼接成字符串 this.showPicker = false; // 关闭选择器 }, onCancel() { this.showPicker = false; // 用户取消操作时关闭选择器 }, }, }; </script> <style scoped> .content { padding: 20px; } </style> ``` --- ### 4. **说明** - `mode="region"` 表示启用省市区模式。 - `v-model="showPicker"` 用于控制选择器的显示与隐藏。 - `@confirm` 是当用户点击确认按钮时触发的事件回调函数,返回所选地区的详细信息[^1]。 - 默认值可通过 `:default-region` 设置,默认值应为 `[省级编码, 市级编码, 区级编码]` 形式的数组[^3]。 --- ### 5. **运行效果** 1. 页面初始状态下会显示“请选择所在地区”。 2. 点击“选择地区”按钮后,弹出省市区选择器。 3. 用户选择完成后,自动拼接并显示所选地址--- ###
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值