uniapp使用uni-data-picker插件实现省市区弹窗（兼容app）
发布于2022-03-18 20:32 阅读(3291) 评论(0) 点赞(13) 收藏(4)
官方文档：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"></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'
- }
- ]
- }
- ]
- }
- ];
原文链接:https://blog.csdn.net/jinxi1112/article/details/121748073
所属网站分类: 技术文章 > 博客
作者：Jjxj
链接：http://www.qianduanheidong.com/blog/article/317958/fafda069f162b104b62d/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力