vant的地址编辑组件van-address-edit关于地区areaList的问题

75 阅读 0 评论 50 点赞

我是靠谱客的博主懦弱荔枝，这篇文章主要介绍vant的地址编辑组件van-address-edit关于地区areaList的问题，现在分享给大家，希望可以做个参考。

在vue3中使用vant
在安装vant的时候没有附带下载该地址列表,在使用时需要自己手动下载省市区数据

复制代码

1
2
npm i @vant/area-data -D

安装完成之后在页面导入

复制代码

1
2
import { areaList } from '@vant/area-data';

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
 <van-address-edit
:area-list="areaList"
:address-info="addressInfo"
:show-delete="type === 'edit'"
show-set-default
show-search-result
:search-result="searchResult"
:area-columns-placeholder="['请选择', '请选择', '请选择']"
@save="onSave"
@delete="onDelete"
/>

在vue3中不需要const areaList，导入后直接使用

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
<script setup lang="ts">
import { areaList } from '@vant/area-data';
import type {AddressEditInfo} from 'vant'
import { ref, reactive, onMounted } from 'vue'
const type = ref('add')
const searchResult = ref([])
const addressInfo = reactive({})
const onSave = (address: AddressEditInfo) => {
console.log(address)
}
const onDelete = () => {}