uniapp u-picker 省市区选择器

### 使用 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. 用户选择完成后，自动拼接并显示所选地址。 --- ###