0
点赞
收藏
分享

微信扫一扫

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

茗越 2022-03-12 阅读 168

官方文档: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'
						}
					]
				}
			]
		}
	];
举报

相关推荐

0 条评论