uniapp使用uni-data-picker插件实现省市区弹窗（兼容app）

官方文档：uni-app官网1.使用HBuilder导入插件.uni-data-picker 数据驱动的picker选择器 - DCloud 插件市场2.导入成功后，在src文件夹下多一个uni_modules的文件夹3.引入插件import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/k

jinxi1112

10535人浏览 · 2021-12-06 15:46:59

jinxi1112 · 2021-12-06 15:46:59 发布

官方文档：uni-app官网

1.使用HBuilder导入插件.uni-data-picker 数据驱动的picker选择器 - DCloud 插件市场

2.导入成功后，在src文件夹下多一个uni_modules的文件夹

3.引入插件

import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js';

4.在页面中使用

<uni-data-picker
				:localdata="items"
				placeholder="点击选择"
				popup-title="请选择地区"
				v-model="area"
				@change="bindPickerChange"
			>
				<text class="word13" v-if="!area.length">点击选择</text>
				<text class="word13" v-else>{{ area[0] }}，{{ area[1] }}，{{ area[2] }}</text>
				<text class="icon">&#xe70d;</text>
			</uni-data-picker>

	bindPickerChange(val: any): void {
		let area = val.detail.value
		this.area = [area[0].text,area[1].text,area[2].text];
		this.address.province = area[0].value;
		this.address.city = area[1].value;
		this.address.county = area[2].value;
	}

实现效果

items数据结构如下：

items: any[] = [
		{
			text: '北京市',
			value: '110000',
			children: [
				{
					text: '北京市市辖区',
					value: '110100',
					children: [
						{
							text: '东城区',
							value: '110101'
						},
						{
							text: '西城区',
							value: '110102'
						}
					]
				}
			]
		}
	];