【uview】省市二级联动地区选择器

uniapp插件地址

在这里插入图片描述

亲测 兼容微信小程序

使用

注意: 下载安装配置uview组件库,该插件基于uview的upicker组件

  1. 下载插件并导入到项目
  2. 页面中直接引入标签
import barrypicker from '@/uni_modules/barry-picker/components/barry-picker/barry-picker.vue'

components: {
	barrypicker
},
  1. 标签使用
<barry-picker ref="dialog" @get-address="getAddress"></barry-picker>
  1. 方法使用
 // 打开地址弹框
open() {
      this.$refs.dialog.show = true
},
// 获取地址
getAddress(e) {
      console.log('选择的地址是', e);
      this.location = e
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
u-picker组件是uView UI框架中的一个选择器组件,用于选择单个或多个值。要实现省市二级联动,需要引入省市数据源,并将其传递给u-picker组件。 以下是实现步骤: 1. 引入省市数据源 在uView官网下载省市数据源(https://www.uviewui.com/components/picker.html#%E7%9C%81%E5%B8%82%E5%8C%BA%E9%95%BF%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%88%E4%BA%8C%E7%BA%A7%E8%81%94%E5%8A%A8%EF%BC%89),并将其放到项目中。 2. 在页面中引入u-picker组件 ``` <template> <view> <u-picker ref="picker" :title="'请选择省市'" :data="data" @confirm="onConfirm"></u-picker> </view> </template> <script> import uPicker from '@/uview-ui/components/u-picker/u-picker.vue' export default { components: { uPicker }, data() { return { data: [] } }, mounted() { this.loadCityData() }, methods: { loadCityData() { // 引入省市数据源并解析 const cityData = require('@/static/city.json') let data = [] cityData.forEach(province => { let cities = [] province.children.forEach(city => { cities.push({text: city.name, value: city.name}) }) data.push({ text: province.name, children: cities }) }) this.data = data }, onConfirm(selected) { console.log('selected', selected) } } } </script> ``` 3. 在onConfirm方法中获取选择结果 ``` onConfirm(selected) { console.log('selected', selected) } ``` 以上代码实现了省市二级联动的u-picker组件。在选择省份后,会自动加载该省份下的城市列表,并且可以选择其中一个城市。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值