uniapp不使用云项目实现地址选择器
时间: 2023-06-14 20:08:16 浏览: 95
Uniapp 中可以使用第三方组件库来实现地址选择器,比如 `vant` 组件库中的 `area` 组件。该组件可以实现省市区的联动选择,使用方法如下:
1. 在项目中安装 `vant` 组件库:`npm install vant --save`
2. 在 `App.vue` 中引入 `vant` 组件库并注册 `area` 组件:
```vue
<template>
<view>
<!-- ... -->
<van-area title="选择省市区" @confirm="onAreaConfirm" />
</view>
</template>
<script>
import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)
export default {
methods: {
onAreaConfirm(val) {
console.log(val)
}
}
}
</script>
```
> 注:`onAreaConfirm` 是确认选择后的回调函数,参数 `val` 是一个数组,包含选中的省、市、区信息。
3. 运行项目,可以看到一个地址选择器,选择完成后可以在控制台中看到选中的地址信息。
![area](https://vant-contrib.gitee.io/vant/v3.0.0-alpha.11/zh-CN/area/quickstart.gif)
阅读全文