使用vant中的地址编辑组件

Posted luyuandatabase

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用vant中的地址编辑组件相关的知识,希望对你有一定的参考价值。

1.首先导入组件

import Vue from ‘vue‘; import { AddressEdit } from ‘vant‘; Vue.use(AddressEdit);

使用组件

<van-address-edit
  :area-list="areaList"
  show-postal
  show-delete
  show-set-default
  show-search-result
  :search-result="searchResult"
  :area-columns-placeholder="[‘请选择‘, ‘请选择‘, ‘请选择‘]"
  @save="onSave"
  @delete="onDelete"
  @change-detail="onChangeDetail"
/>

 

2.找到vant的area省市区选择

搜索areaList找到 Area.json,点进去,github拷贝一份下来,命名为areaData.js

3.在用的组件中导入areaData.js文件

4.最后给areaList赋值

data() { return { areaList:areaData, searchResult: [], }; }

 

以上是关于使用vant中的地址编辑组件的主要内容,如果未能解决你的问题,请参考以下文章

vant学习文档手册地址

vant组件库在vue中的使用需要配置的哪些?

小程序使用 vant 快速创建页面

HBuilderX使用Vant组件库

Mpvue中使用Vant Weapp组件库

uniapp写h5页面使用Vant组件开发项目