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