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

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

npm i @vant/area-data -D

安装完成之后在页面导入

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

 <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，导入后直接使用

<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 = () => {}

最后

以上就是懦弱荔枝为你收集整理的vant的地址编辑组件van-address-edit关于地区areaList的问题的全部内容，希望文章能够帮你解决vant的地址编辑组件van-address-edit关于地区areaList的问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。